• 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: '仓库代码',  30, align: 'center' },
                    { field: 'WarehouseName', title: '仓库名称',  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+"""; 
    //==========================================

    大功告成!!!

    纯手写,转载请标明出处

  • 相关阅读:
    数据结构之静态库动态库
    数据结构之二叉树
    数据结构之学习大纲
    Unix高级编程之文件及目录
    Unix高级编程之标准IO
    Unix高级编程之文件IO
    Unix高级编程之进程控制
    Unix高级编程之进程环境
    内置支持类(RegExp)
    获取DOM元素的三种方法
  • 原文地址:https://www.cnblogs.com/BenPaoWoNiu/p/11346133.html
Copyright © 2020-2023  润新知