EasyUI Forum
November 28, 2021, 09:51:34 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Editable multiple rows of Easyui Datagrid  (Read 3664 times)
Alfred
Full Member
***
Posts: 132


-Licensed User-


View Profile
« 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: 3580


View Profile Email
« 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: 132


-Licensed User-


View Profile
« 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: 1


View Profile Email
« 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: 2016


View Profile Email
« 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]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!