zoukankan      html  css  js  c++  java
  • EasyUI DataGrid根据字段动态合并单元格

    1.合并方法

    /**
    * EasyUI DataGrid根据字段动态合并单元格
    * 参数 tableID 要合并table的id
    * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");
    */
    function mergeCellsByField(tableID, colList) {
        var ColArray = colList.split(",");
        var tTable = $("#" + tableID);
        var TableRowCnts = tTable.datagrid("getRows").length;
        var tmpA;
        var tmpB;
        var PerTxt = "";
        var CurTxt = "";
        var alertStr = "";
        for (j = ColArray.length - 1; j >= 0; j--) {
            PerTxt = "";
            tmpA = 1;
            tmpB = 0;

            for (i = 0; i <= TableRowCnts; i++) {
                if (i == TableRowCnts) {
                    CurTxt = "";
                }
                else {
                    CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
                }
                if (PerTxt == CurTxt) {
                    tmpA += 1;
                }
                else {
                    tmpB += tmpA;
                   
                    tTable.datagrid("mergeCells", {
                        index: i - tmpA,
                        field: ColArray[j],  //合并字段
                        rowspan: tmpA,
                        colspan: null
                    });
                    tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                        index: i - tmpA,
                        field: "Ideparture",
                        rowspan: tmpA,
                        colspan: null
                    });
                  
                    tmpA = 1;
                }
                PerTxt = CurTxt;
            }
        }
    }

    2.调用合并方法

      //呈现列表数据
            $('#List').datagrid({ pagination: true,
                onLoadSuccess: function (data) {
                    if (data.rows.length > 0) {
                        //调用mergeCellsByField()合并单元格
                        mergeCellsByField("tbList", "No");
                    }
                }
            });

    说明:

    mergeCellsByField(tableID, colList) ;

    参数 tableID 要合并table的id
    参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");

    这种方法一般情况下都不会用,因为合并出来的不美观

    假如:

    1 1 1
    1 5 1
    1 5 1
    1 5 2
    1 1 2

    如下

    1 1 1
    5 1
    1
    2
    1 2

    由于表格的限制,没法合并第三列了,3个“1”,2个“2”,合并掉,大家就明白怎么不美观了,不适合一般的查阅习惯

    哈哈,根据我方法里面的红色部分,以一个为主列,其他根据他的行数合并,噢噢噢噢噢噢。成功啦

    非常感谢

    http://www.gogogogo.me/development/EasyUI-DataGrid-mergeCells.html

    我弄了好多天没搞定,真心的祝你全家健康幸福!!!!

  • 相关阅读:
    pandas笔记
    MongoDB分片集群技术
    MongoDB基本操作
    linux MongoDB安装配置
    MongoDB入门
    introJs用法及在webkit内核浏览器的一个报错
    日常ie兼容问题(持续整理)
    浅谈connect,withRouter,history,useState,useEffect
    node环境配置
    小程序之签到
  • 原文地址:https://www.cnblogs.com/xcsn/p/2960980.html
Copyright © 2011-2022 走看看