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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM