jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

  

有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉。
  

  

虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果。
  

  

现在我们来看看原的编辑:来自Easyui 1.5.1 & lt的演示,演示/datagrid/rowediting.html>

  

 jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

  

接下来,我们主要是要高度自由的编辑实现:
  

  

1。可以同时追加多行
  

  

2。追加的行可以是任何位置
  

  

3。可以随时进行编辑任意位置的行
  

  

4。保存再统一验证

  

实现   

在原有的rowediting.html进行修改!

  

        函数alt=" jquery Easyui Datagrid实现批量操作(编辑,删除,添加)">

  

        函数removeit () {   如果(editIndex==定义){返回}   $ (" # dg”)。datagrid (selectRow, editIndex);      $ (" # dg”)。datagrid (cancelEdit, editIndex)   .datagrid (deleteRow”即可,editIndex);   editIndex=定义;   }   之前      

 jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

  

        函数append () {   var指数=$ (' # dg)。datagrid (getRowIndex, $ (' # dg) .datagrid (' getSelected '));   如果(指数==1)   指数=0;   $ (" # dg”)。datagrid (“insertRow”{   指数:指数+ 1,   行:{打开:“& lt; a href=javascript: append()的祝辞+ & lt; a>& lt; a href=' javascript: removeit()的祝辞& lt; a>“状态:“P”}   });   }      

 jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

  

        函数接受(){   如果(endEditing ()) {   var dg=美元(# dg);=$ var行dg.datagrid (“getChanges”);   如果(rows.length) {   插入var=$ dg。datagrid (“getChanges”、“插入”);   var=$ dg删除。datagrid (“getChanges”、“删除”);   var=$ dg更新。datagrid (“getChanges”、“更新”);   var effectRow=新对象();   如果(inserted.length) {   effectRow["插入"]=JSON.stringify(插入);   }   如果(deleted.length) {   effectRow["删除"]=JSON.stringify(删除);   }   如果(updated.length) {   effectRow(“更新”)=JSON.stringify(更新);   }//警报(插入);//警报(删除);//通知(更新);   }   }//$。邮报》(“/Home/提交”、effectRow、功能(负责){//如果(负责){//美元dg.datagrid (“acceptChanges”);//bindData ();//}//},JSON)。错误(函数(){//.messager美元。alert("提示”、“提交错误了!”);//});   }      

最后我们可以获得,上面操作的,所有:添加的行,删除的行,更新的行!把数据传入到数据后台进行处理!

  

最后你还需要对数据进行循环校验,可以获得数据,在控制台输出:

        console.log(插入);   console.log(删除);    console.log(更新);      


   jquery Easyui Datagrid实现批量操作(编辑,删除,添加)

  

  

最后完整代码:(替换Easyui的rowediting.html可运行效果)

        & lt; !DOCTYPE html>   & lt; html>   & lt; head>   & lt;元charset=皍tf - 8”比;   在DataGrid & lt; title>行编辑——jQuery EasyUI Demo   & lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/themes/default/easyui.css " rel=巴獠縩ofollow”比;   & lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/themes/icon.css " rel=巴獠縩ofollow”比;   & lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/demo.css " rel=巴獠縩ofollow”比;   & lt;脚本type=" text/javascript " src=" https://www.yisu.com/jquery.min.js "祝辞& lt;/script>   & lt;脚本type=" text/javascript " src=" https://www.yisu.com/jquery.easyui.min.js "祝辞& lt;/script>   & lt;/head>   & lt; body>            在DataGrid< & lt; h3>行编辑;/h3>   & lt; p>单击行开始编辑。;/p>   & lt; div祝辞& lt;/div>      & lt;表id=癲g”类=癳asyui-datagrid”title=癉ataGrid行编辑”   数据选项="   iconCls:“icon-edit”,   singleSelect:没错,   工具栏:“#结核病”,   url:“datagrid_data1.json”,   方法:“得到”,   在操作& lt;/th>   & lt; th数据选项=弊侄?“itemid”,宽度:80”在项目ID

jquery Easyui Datagrid实现批量操作(编辑,删除,添加)