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

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

<table id="dataGrid" class="easyui-datagrid" title="" data-options="rownumbers:'true' ,iconCls:'icon-site',nowrap: true, collapsible: true,idField: 'Id',singleSelect:false">
                        <thead>
                            <tr>
                                <th data-options="field:'cb',checkbox:true"></th>
                                <th data-options="field:'GoodsId',width:'60px',align:'center'">商品编号</th>
                                <th data-options="field:'DisplayName',width:'300px',align:'left'">商品名称</th>
                                <th data-options="field:'VIPPrice',align:'right',width:'100px',formatter:FormatterMoney,editor:{type:'numberbox',options:{precision:2}}">专柜价</th>
                                <th data-options="field:'Price',align:'right',width:'100px',formatter:FormatterMoney">原价</th>
                                <th data-options="field:'Level',align:'center',width:'100px'">等级</th>
                                <th data-options="field:'IsEnable',width:'100px', align:'center',formatter:formatTop">是否在售</th>
                                <th data-options="field:'IsWeb',width:'100px', align:'center',formatter:formatTop">是否网站可见</th>
                            </tr>
                        </thead>
                    </table>

效果如下图所示：

 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<int> ids, int counterId)
        {
            foreach (var id in ids)
            {
                BaseManage<VIPCounterDetail> bm = new BaseManage<VIPCounterDetail>();
                QueryOption<VIPCounterDetail> opt = new QueryOption<VIPCounterDetail>();
                opt.Conditions.Add(new QueryConditionExt<VIPCounterDetail>() { FieldExp = p => p.Id, SymbolEnum = QueryConditionSymbol.Equals, Val = id });
                IList<VIPCounterDetail> list = bm.Query(opt).Items;
                if (bm.Remove(list[0].Id) == 1)
                {
                    UpdateInfo(counterId, "del");
                }
            }
            return 1;
        }