jquery Easyui Datagrid实现批量操作编辑，删除，添加

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

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

现在我们来看看原的编辑:来自Easyui 1.5.1的Demo

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

1.可以同时追加多行

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

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

4.保存再统一验证

实现

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

第一：修改行的点击事件（点击行的时候进入编辑状态）

rush:js;"> 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删除选中的行，点击列表的-号，删除减号行）

rush:js;"> function removeit(){ if (editIndex == undefined){return} $('#dg').datagrid('selectRow',editIndex);

$('#dg').datagrid('cancelEdit',editIndex)
 .datagrid('deleteRow',editIndex);

editIndex = undefined;
}

第三：添加事件，点击菜单的Append和+号

rush:js;"> function append(){ var index = $('#dg').datagrid('getRowIndex',$('#dg').datagrid('getSelected')); if (index == -1) index = 0; $("#dg").datagrid("insertRow",{ index: index+1,row: {oper: "+ -",status:'P'} }); }

第四：保存（获得操作的记录，包括，增加，修改，删除中的记录）

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

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

总结：

最后完整代码：（替换Easyui的rowediting.html可运行效果）

Row Editing in DataGrid - jQuery EasyUI Demo

Row Editing in DataGrid

Click the row to start editing.

<div id="tb" style="height:auto">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges

function onClickCell(index,0);
}
}
}
function onEndEdit(index,row){
var ed = $(this).datagrid('getEditor',{
index: index,field: 'productid'
});
row.productname = $(ed.target).comboBox('getText');
}
function append(){
var index = $('#dg').datagrid('getRowIndex',status:'P'}
});
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('selectRow',editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
var $dg = $('#dg');
var rows = $dg.datagrid('getChanges');
if (rows.length) {
var inserted = $dg.datagrid('getChanges',"提交错误了！");
//});
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}

function contains(arr,obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return true;
}
}
return false;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/jquery/41472.html