用EasyUI-DataGrid实现列表批量删除的功能(ASP.NET/MVC)
程序员文章站
2022-03-07 23:20:13
1、前端代码:首先给列表添加多选框。注意:当singleselect的属性值为false时,才能实现多选功能;当checkbox属性值为true选择行勾选,false选择行不勾选。...
1、前端代码:首先给列表添加多选框。注意:当singleselect的属性值为false时,才能实现多选功能;当checkbox属性值为true选择行勾选,false选择行不勾选。
商品编号 | 商品名称 | 专柜价 | 原价 | 等级 | 是否在售 | 是否网站可见 |
---|
效果如下图所示:
2、js代码:从前端到后台进行传值,完成交互。原理:利用getselections属性,将列表选中行的id循环写入数组,利用ajax发送post请求将值传到controller,循环删除。
$("#delbtn").bind("click", function () { var selrow = $("#datagrid").datagrid("getselections");//返回选中多行 if (selrow.length == 0) { $.msgbox.alert("提示", "请至少选择一行数据!"); return false; } var ids = []; //定义数组,用来记录列表id for (var i = 0; i < selrow.length; i++) { var id = selrow[i].id; //取列表中的单个id ids.push(id); } $.msgbox.confirm("警告", "确定要删除选中的商品?", function () {//四个可选参数 $.ajax({ type: "post", async: false, datatype: "json", url: "/customer/deletegoodsdetails", data: { ids: ids, counterid: $("#counterid").val() }, success: function (result) { if (result==1) { $.msgbox.alert("提示", "恭喜您成功删除选定商品!"); $("#datagrid").datagrid("reload"); $('#datagrid').datagrid('clearselections'); //这行代码很重要 } else { $.msgbox.alert("提示", "删除失败,请重新操作!"); return; } } }); }, function () { return false; }); });
注意:最开始笔者没写下面这行代码:$('#datagrid').datagrid('clearselections');
于是出现如下bug:当使用批量删除列表中勾选的数据,当再次进行批量删除的操作时,在跟踪调试代码的时候会发现前一次删除的记录会一起传到后台,只有重现加载页面才能进行正常删除。后来发现,进行选中多行数据提交并删除后,getselections属性会记录了id的缓存,因此需要在删除后将其释放。
解决办法:
$('#datagrid').datagrid('clearselections'); //或者selrow.length=0;
3、controller作为数据传输纽带,在底层实现批量删除。(ps:代码中一些封装的方法因不同的项目而异,)
public int deletecounterdetail(list ids, int counterid) { foreach (var id in ids) { basemanage bm = new basemanage(); queryoption opt = new queryoption(); opt.conditions.add(new queryconditionext() { fieldexp = p => p.id, symbolenum = queryconditionsymbol.equals, val = id }); ilist list = bm.query(opt).items; if (bm.remove(list[0].id) == 1) { updateinfo(counterid, "del"); } } return 1; }