Title: Editable multiple rows of Easyui Datagrid
Post by: Alfred 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 <?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
Title: Re: Editable multiple rows of Easyui Datagrid
Post by: stworthy 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
Title: Re: Editable multiple rows of Easyui Datagrid
Post by: Alfred on May 05, 2018, 08:01:11 PM
Thanks, this look almost fine. How can we save all edited rows in one go?
Title: Re: Editable multiple rows of Easyui Datagrid
Post by: serit 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
Title: Re: Editable multiple rows of Easyui Datagrid
Post by: jarry on October 12, 2021, 01:20:21 AM
Please refer to this example. <!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>
|