easyui是怎么实现批量删除的_jquery Easyui Datagrid实现批量操作（编辑，删除，添加）...

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

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

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

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

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: "+ -",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();

// }

//}, "JSON").error(function () {

// $.messager.alert("提示", "提交错误了！");

//});

}

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

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

console.log(inserted);

console.log(deleted);

console.log(updated);

总结：

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

Row Editing in DataGrid - jQuery EasyUI Demo

Row Editing in DataGrid

Click the row to start editing.

data-options="

iconCls: 'icon-edit',

singleSelect: true,

toolbar: '#tb',

url: 'datagrid_data1.json',

method: 'get',

onClickCell: onClickCell,

onEndEdit: onEndEdit

">

操作Item IDProductList PriceUnit CostAttributeStatus

Append

Remove

Accept

Reject

GetChanges

//编辑的行

var editIndex = undefined;

function endEditing() {

if (editIndex == undefined){return true}

$('#dg').datagrid('endEdit', editIndex);

editIndex = undefined;

return true;

}

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);

}

}

}

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', $('#dg').datagrid('getSelected'));

if (index == -1)

index = 0;

$("#dg").datagrid("insertRow", {

index: index+1,

row: {oper: "+ -",status:'P'}

});

}

function removeit(){

if (editIndex == undefined){return}

$('#dg').datagrid('selectRow', editIndex);

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

.datagrid('deleteRow', editIndex);

editIndex = undefined;

}

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();

// }

//}, "JSON").error(function () {

// $.messager.alert("提示", "提交错误了！");

//});

}

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;

}

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