EasyUI datagrid 内容列合并


要实现如下合并样式:

js代码如下:

/**
    * EasyUI DataGrid根据字段动态合并单元格
    * param tableID 要合并table的id
    * param colList 要合并的列,用逗号分隔(例如:"name,department,office");
    * param mainColIndex 要合并的主列索引
    */
    function mergeCellsByField(tableID, colList, mainColIndex) {
        var ColArray = colList.split(",");
        var tTable = $('#' + tableID);
        var TableRowCnts = tTable.datagrid("getRows").length;
        var tmpA;
        var tmpB;
        var PerTxt = "";
        var CurTxt = "";
        var alertStr = "";
        for (var i = 0; i <= TableRowCnts ; i++) {
            if (i == TableRowCnts) {
                CurTxt = "";
            }
            else {
                CurTxt = tTable.datagrid("getRows")[i][ColArray[mainColIndex]];
            }
            if (PerTxt == CurTxt) {
                tmpA += 1;
            }
            else {
                tmpB += tmpA;
                for (var j = 0; j < ColArray.length; j++) {
                    tTable.datagrid('mergeCells', {
                        index: i - tmpA,
                        field: ColArray[j],
                        rowspan: tmpA,
                        colspan: null
                    });
                }
                tmpA = 1;
            }
            PerTxt = CurTxt;
        }
    }
View Code

调用合并方法:

//dgReportDetail=要合并的datagrid,"col1,col2,col3"=要合并的列,0=‘参照主列’在第二个参数集合的索引,此处为col1
mergeCellsByField("dgReportDetail", "col1,col2,col3", 0);

如果没有参照主列,实现内容列的相同字段自动合并,可参考以下地址:

http://www.cnblogs.com/xcsn/archive/2013/03/15/2960980.html


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM