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

 

大功告成!!!

 

 

纯手写,转载请标明出处

 

posted @ 2019-08-13 15:20  奔跑丶蜗牛  阅读(2867)  评论(0编辑  收藏