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
我弄了好多天沒搞定,真心的祝你全家健康幸福!!!!