欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用EasyUI-DataGrid实现列表批量删除的功能(ASP.NET/MVC)

程序员文章站 2022-06-29 08:18:17
1、前端代码:首先给列表添加多选框。注意:当singleselect的属性值为false时,才能实现多选功能;当checkbox属性值为true选择行勾选,false选择行不勾选。...

1、前端代码:首先给列表添加多选框。注意:当singleselect的属性值为false时,才能实现多选功能;当checkbox属性值true选择行勾选,false选择行不勾选。


  商品编号 商品名称 专柜价 原价 等级 是否在售 是否网站可见

效果如下图所示:

用EasyUI-DataGrid实现列表批量删除的功能(ASP.NET/MVC)

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