Editable multiple rows of Easyui Datagrid

EasyUI Forum

December 08, 2024, 05:40:56 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Editable multiple rows of Easyui Datagrid

Pages: [1]

« previous next »

Author

Topic: Editable multiple rows of Easyui Datagrid (Read 9638 times)

Alfred

Full Member

Posts: 134

-Licensed User-

Editable multiple rows of Easyui Datagrid

« on: May 05, 2018, 11:29:08 AM »

I do not see any example of editable multiple rows of datagrid. For example, we can make multiple rows editable like the following in php

Code:

<?php
foreach($data as $key){
  echo '<tr>';
  echo '<td><input type="number" readonly value="'.$key->id.'" name="id"></td>';
  echo '<td><input type="text" value="'.$key->name.'" name="itemname"></td>';
  echo '<td><input type="number" value="'.$key->rate.'" name="rate"></td>';
  echo '</tr>';
}
?>

As far as I know, we can edit only one row of datagrid at a time in easyui. Please can you provide an example


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Editable multiple rows of Easyui Datagrid

« Reply #1 on: May 05, 2018, 06:00:46 PM »

This tutorial shows how to build an inline editing datagrid with multiple editable rows.

https://www.jeasyui.com/tutorial/datagrid/datagrid12.php


	Logged

Alfred

Full Member

Posts: 134

-Licensed User-

Re: Editable multiple rows of Easyui Datagrid

« Reply #2 on: May 05, 2018, 08:01:11 PM »

Thanks, this look almost fine. How can we save all edited rows in one go?


	Logged

serit

Newbie

Posts: 4

Re: Editable multiple rows of Easyui Datagrid

« Reply #3 on: October 08, 2021, 04:15:59 AM »

Hi. Is it possible to edit multiples rows but with multiples dialog forms? Like you select multiples rows on dataGrid and hit edit opens multiples dialog boxes with form to edit for each selected row on datagrid. Thanks in advance


	Logged

jarry

Administrator
Hero Member

Posts: 2278

Re: Editable multiple rows of Easyui Datagrid

« Reply #4 on: October 12, 2021, 01:20:21 AM »

Please refer to this example.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
var data = {"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":"12.00","status":"P","listprice":"18.50","attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"38.50","attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":"12.00","status":"P","listprice":"26.50","attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":"12.00","status":"P","listprice":"35.50","attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"158.50","attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":"12.00","status":"P","listprice":"83.50","attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"23.50","attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":"12.00","status":"P","listprice":"89.50","attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":"92.00","status":"P","listprice":"63.50","attr1":"Adult Male","itemid":"EST-18"}
]}

function formatAction(value,row,index){
return '<a href="javascript:void(0)" onclick="editrow('+index+')">Edit</a>';
}
function editrow(index){
var row = $('#dg').datagrid('getRows')[index];
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit');
if (row.itemid == 'EST-1'){
$('#fm').empty().html(`
<div style="margin-bottom:10px">
<input name="itemid" class="easyui-textbox" required="true" label="Item ID:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="productid" class="easyui-textbox" required="true" label="Product:" style="width:100%">
</div>
`);
} else {
$('#fm').empty().html(`
<div style="margin-bottom:10px">
<input name="unitcost" class="easyui-numberspinner" precision="2" required="true" label="Unit Cost:" style="width:100%">
</div>
<div style="margin-bottom:10px">
<input name="attr1" class="easyui-textbox" required="true" label="Attribute:" style="width:100%">
</div>
`);
}
$.parser.parse('#fm');
$('#fm').form('load',row);
}
}
</script>
</head>
<body>
<table id="dg" class="easyui-datagrid" title="DataGrid" style="width:750px;height:250px"
data-options="singleSelect:true,data:data">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
<th data-options="field:'action',width:80,align:'center',formatter:formatAction">Action</th>
</tr>
</thead>
</table>
<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">

</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
</body>
</html>


	Logged

Pages: [1]

« previous next »