EasyUI DataGrid 弹框编辑反选

EasyUI DataGrid弹框编辑反选
首选我们先说下DataGrid的属性、方法Easyui文档

下面的div里放的是个DataGrid。首先DataGrid要能够多选。

前端代码

这里只讲第二个DataGrid。

JQuery 代码段

DataGrid 绑定数据源。

 1. $(function () {
        var columnspart = [
            { field: 'ck', checkbox: 'true', width: 40},
            { field: 'PartId', title: '零件号/Kitting包号', width: 80 },
            { field: 'PartName', title: '零件名称/Kitting包名称', width: 140 },
            {
                field: 'IsKitting', title: '是否Kitting包',                 width: 80, formatter: function (value, row) {
                    if (value == 1)
                        return "是";
                    else if (value == 0)
                        return "否";
                }
            }
        ];
        $('#manifoldpartTable').grid({
            //跳转的后台方法
            url: '/RackTypePart/Text',
            columns: [columnspart],
            singleSelect: false,
        }); });

编辑反选

实现反选功能需要通过json在后台查询要反选的数据。比如id=* 的反选。

     $.get(
               //交互方法
            "/ManifoldBak/GetmanifoldBymanifoid?ManifoldId=" + row.ManifoldId + "",
            function (result) {
                debugger;
                //服务器交互返回数据
                if (result.length == 0) {
                //返回数据为null，什么事情都不做
                } else {
                               $('#manifoldpartTable').datagrid('uncheckAll')//此代码用来清除选项
                    $.each(result, function (index, item) {
                                       $('#manifoldpartTable').datagrid('checkRow', index) //选中行  
                    });
                }
            });

实现结果如下图所示：

如有不明白的地方，可以评论。