zoukankan      html  css  js  c++  java
  • 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+"""; 
    //==========================================

    大功告成!!!

    纯手写,转载请标明出处

  • 相关阅读:
    Working with WordprocessingML documents (Open XML SDK)
    How to Choose the Best Way to Pass Multiple Models in ASP.NET MVC
    Azure:Manage anonymous read access to containers and blobs
    Convert HTML to PDF with New Plugin
    location.replace() keeps the history under control
    On the nightmare that is JSON Dates. Plus, JSON.NET and ASP.NET Web API
    HTTP Modules versus ASP.NET MVC Action Filters
    解读ASP.NET 5 & MVC6系列(6):Middleware详解
    Content Negotiation in ASP.NET Web API
    Action Results in Web API 2
  • 原文地址:https://www.cnblogs.com/BenPaoWoNiu/p/11346133.html
Copyright © 2011-2022 走看看