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+"\""; 
//==========================================

 

大功告成！！！

 

 

純手寫，轉載請標明出處