有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉。
虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果。
现在我们来看看原的编辑:来自Easyui 1.5.1 & lt的演示,演示/datagrid/rowediting.html>
接下来,我们主要是要高度自由的编辑实现:
1。可以同时追加多行
2。追加的行可以是任何位置
3。可以随时进行编辑任意位置的行
4。保存再统一验证
实现
在原有的rowediting.html进行修改!
函数alt=" jquery Easyui Datagrid实现批量操作(编辑,删除,添加)">
函数removeit () { 如果(editIndex==定义){返回} $ (" # dg”)。datagrid (selectRow, editIndex); $ (" # dg”)。datagrid (cancelEdit, editIndex) .datagrid (deleteRow”即可,editIndex); editIndex=定义; } >之前
函数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”} }); }
函数接受(){ 如果(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(更新);
最后完整代码:(替换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”在项目IDjquery Easyui Datagrid实现批量操作(编辑,删除,添加)