EasyUI DataGrid加载数据时,checkbox自动选中指定几行,通过数据源data实现checkbox自动选中

 

通过分析官方源码，发现easyui的datagrid加载数据时根据行字段"checked"来进行选中状态的判定，

 

这样我们就可以

在datagrid数据源data中行数据增加一字段:"checked"，值设置为true即可，这样easyUI的datagrid加载数据时就会自动选中行(checkbox选中)    别慌！！！

 还有行选中效果需要实现，否则无法通过 $("#table").datagrid("getChecked") /  $("#table").datagrid("getSelected")获取选中行

初始化datagrid的Js示例：

$("#ckTable").datagrid({　　　　　
        idField: 'Id',
        toolbar: '#toolbarCk',
        columns: [
            [
                { field: 'Ck', checkbox: true },　　//设置该列显示为 checkbox
                { field: 'Id',hidden: true },
                { field: 'WarehouseCode', title: '仓库代码', width: 30, align: 'center' },
                { field: 'WarehouseName', title: '仓库名称', width: 70, align: 'center' }
            ]
        ],
        loadFilter: function (data) {
　　　  　　// $(this).datagrid('clearChecked');   // 方式一：避免重新加载数据后控件还记录有选中的行，注意调用此方法会触发 onUncheckAll、onUnselectAll事件

           // 方式二：不会触发任何事件
　　　  　　$.data(this, "datagrid").checkedRows = [];
　　　  　　$.data(this, "datagrid").selectedRows = [];

            if (data.Data != undefined) {
                return data.Data;
            } else {
                return data;
            }
        }
    });    

 

 

datagrid数据源示例：

{
    "rows":[
        {
            "checked":true,　　// 指定该字段值为 true，表格就会自动选中该行
            "Id":250,
            "WarehouseCode":"20190726001",
            "WarehouseName":"仓库001号"
        },
        {
            "checked":true,　　// 指定该字段值为 true，表格就会自动选中该行
            "Id":264,
            "WarehouseCode":"20190727002",
            "WarehouseName":"仓库002号"
        }
    ],
    "total":2
}

效果：

 checkbox选中了，接下来就实现行的选中：

(1) 源代码中找到以下一行：(大约在源码 12257行)

var cls = "class=\"datagrid-row " + (_8e5 % 2 && opts.striped ? "datagrid-row-alt " : " ") + cs.c + "\"";

(2) 替换为以下几行

// ==========================================
// datagrid加载数据时 通过data.checked字段实现行级选中 by liujia 2019-08-14
// _8e7 表格属性对象，插入选中行到缓存对象中

if (row.checked && opts.idField != undefined && opts.idField != "") {
　　$.easyui.addArrayItem(_8e7.checkedRows, opts.idField, row);
　　$.easyui.addArrayItem(_8e7.selectedRows, opts.idField, row);
}
var cls = "class=\"datagrid-row " + (row.checked ? "datagrid-row-checked datagrid-row-selected " : " ") +(_8e5%2&&opts.striped?"datagrid-row-alt ":" ")+cs.c+"\""; 
//==========================================

 

大功告成！！！

 

 

纯手写，转载请标明出处