jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
- 更新时间:2023-01-13 15:10:01
- 编辑:萧悦心
有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉。
虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果。
现在我们来看看原的编辑:来自Easyui 1.5.1的Demo <demo/datagrid/rowediting.html>
接下来,我们主要是要高度自由的编辑实现:
1.可以同时追加多行
2.追加的行可以是任何位置
3.可以随时进行编辑任意位置的行
4.保存再统一验证
实现
在原有的rowediting.html进行修改!
第一:修改行的点击事件(点击行的时候进入编辑状态)
function onClickCell(index, field){ if (editIndex != index) { if (endEditing()) { $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); var ed = $('#dg').datagrid('getEditor', { index: index, field: field }); if (ed) { ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus(); } editIndex = index; } else { setTimeout(function () { $('#dg').datagrid('selectRow', editIndex); }, 0); } } }
第二:删除事件(点击顶部菜单Remove删除选中的行,点击列表的-号,删除减号行)
function removeit(){ if (editIndex == undefined){return} $('#dg').datagrid('selectRow', editIndex); $('#dg').datagrid('cancelEdit', editIndex) .datagrid('deleteRow', editIndex); editIndex = undefined; }
第三:添加事件,点击菜单的Append和+号
function append(){ var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected')); if (index == -1) index = 0; $("#dg").datagrid("insertRow", { index: index+1, row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'} }); }
第四:保存(获得操作的记录,包括,增加,修改,删除中的记录)
function accept(){ if (endEditing()){ var $dg = $('#dg'); var rows = $dg.datagrid('getChanges'); if (rows.length) { var inserted = $dg.datagrid('getChanges', "inserted"); var deleted = $dg.datagrid('getChanges', "deleted"); var updated = $dg.datagrid('getChanges', "updated"); var effectRow = new Object(); if (inserted.length) { effectRow["inserted"] = JSON.stringify(inserted); } if (deleted.length) { effectRow["deleted"] = JSON.stringify(deleted); } if (updated.length) { effectRow["updated"] = JSON.stringify(updated); } //alert(inserted); //alert(deleted); //alert(updated); } } //$.post("/Home/Commit", effectRow, function (rsp) { // if (rsp) { // $dg.datagrid('acceptChanges'); // bindData(); // } /
相关教程
-
jQuery实现鼠标滑过Div层背景变颜色的代码详解
这篇文章主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
发布时间:2020-02-04
-
jQuery选择器知识点分享
本篇文章主要是对jQuery选择器进行了全面的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
发布时间:2020-03-27
-
如何使用jQuery+ajax实现鼠标单击修改内容
这篇文章主要介绍了jQuery+ajax实现鼠标单击修改内容的方法,需要的朋友可以参考下
发布时间:2020-03-01
-
jQuery旋转插件jqueryrotate用法详解
给大家整理一篇关于jQuery的教程,这篇文章主要介绍了jQuery旋转插件jqueryrotate用法,结合实例形式详细分析了jqueryrotate插件的功能、定义及相关参数的使用方法,需要的朋友可以参考下
发布时间:2022-06-22
-
jQuery中slidedown与slideup实例用法
这篇文章主要介绍了jQuery中slidedown与slideup方法用法,结合实例形式分析了jQuery基于slidedown与slideup方法实现页面元素展开与折叠的实现技巧,需要的朋友可以参考下
发布时间:2020-04-24
-
JQuery代码片段精选整理
这篇文章主要介绍了12个超实用的JQuery代码片段,代码简洁,具有实用价值,感兴趣的小伙伴们可以参考一下
发布时间:2020-04-06
-
jquery选项卡鼠标延迟的插件实例代码详解
jq选项卡鼠标延迟的插件实例,需要的朋友可以参考一下
发布时间:2020-01-29
-
jQuery animate easing使用实例方法
这篇文章主要介绍了jQuery animate easing使用方法详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
发布时间:2019-12-12
-
解析从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
这篇文章主要介绍了从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别 的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
发布时间:2020-02-01