合并列

比如一般的报表中会有汇总行,需要将前几列合并成一个单元格,具体的代码如下:

//合并单元格-列
function mergeCellsByField(tableID) {
var mergeColumn = 9;//需要合并的列数
var tTable = $("#" + tableID);
var TableRowCnts = tTable.datagrid("getRows").length;
for (i = 0; i < TableRowCnts; i++) {
tTable.datagrid("mergeCells", {
index: i,
field: "ProjectName",//合并字段
colspan: mergeColumn
});
}
}

效果如下:

合并列.png

合并行

场景:将列表中内容相同的行合并成一个单元格。代码如下:

//合并单元格-行
function mergeCellsByField(tableID) {
var tTable = $("#" + tableID);
var TableRowCnts = tTable.datagrid("getRows").length;
var span = 1;
var currentValue = "";
var previousValue = "";
for (i = 0; i < TableRowCnts + 1; i++) {
if (i == TableRowCnts) {
currentValue = "";
} else {
currentValue = tTable.datagrid("getRows")[i]["Dimession"];
}
if (previousValue == currentValue) {
span++;
} else {
var index = i - span;
tTable.datagrid("mergeCells", {
index: index,
field: "Dimession",//合并字段
rowspan: span,
colspan: null
});
span = 1;
previousValue = currentValue;
}
}
}

效果如下:

合并行.png

公共方法(转)

/**
* EasyUI DataGrid根据字段动态合并单元格
* @param fldList 要合并table的id
* @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");
*/
function MergeCells(tableID, fldList) {
var Arr = fldList.split(",");
var dg = $('#' + tableID);
var fldName;
var RowCount = dg.datagrid("getRows").length;
var span;
var PerValue = "";
var CurValue = "";
var length = Arr.length - 1;
for (i = length; i >= 0; i--) {
fldName = Arr[i];
PerValue = "";
span = 1;
for (row = 0; row <= RowCount; row++) {
if (row == RowCount) {
CurValue = "";
}
else {
CurValue = dg.datagrid("getRows")[row][fldName];
}
if (PerValue == CurValue) {
span += 1;
}
else {
var index = row - span;
dg.datagrid('mergeCells', {
index: index,
field: fldName,
rowspan: span,
colspan: null
});
span = 1;
PerValue = CurValue;
}
}
}
}


作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Web前端
posted 阅读(14 ) 评论(0 )

评论内容: