easyui的datagrid合并单元格

(一)一列或几列的单独合并

js代码如下:

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
});
tmpA = 1;
}
perTxt = curTxt;
}
}
}

在datagrid中调用:

onLoadSuccess: function(data) {
if (data.rows.length > 0) {
 mergeCellsByField("safetyValueTable", "EquDesctipt,EquName2,EXStatus,MinUseCount");//标红的为要合并的字段
}

(二)根据某一列进行合并,也就是设置一个主列,如果该列有数据相同需要合并,则所有字段都进行合并,如果没有,其余字段也不合并。

function mergeCells(data) {
var arr = [{ mergeFiled: "EquDesctipt", premiseFiled: "EquName2" }, //合并列的field数组及对应前提条件filed(为空则直接内容合并)
{ mergeFiled: "EquName2", premiseFiled: "EquName2" },
{ mergeFiled: "EXStatus", premiseFiled: "EquName2" },
{ mergeFiled: "MinUseCount", premiseFiled: "EquName2" }
];
// var dg = $("#safetyValueTable"); //要合并的datagrid中的表格id
var rowCount = $("#safetyValueTable").datagrid("getRows").length;
var flag = true;
var length = arr.length - 1;
for (i = length; i >= 0; i--) {
var cellName = arr[i].mergeFiled;
var condiName = arr[i].premiseFiled;
if (isNotNull(condiName)) {
flag = false;
}
var perValue = "";
var perCondition = "";
var span = 1;
for (row = 0; row <= rowCount; row++) {
var curValue = "";
var curCondition = "";
if (row == rowCount) {
curValue = "";
curCondition = "";
} else {
curValue = $("#safetyValueTable").datagrid("getRows")[row][cellName];//获得第i列的要排序的值
/* if(cellName=="ORGSTARTTIME"){//特殊处理这个时间字段
curValue =formatDate(dg.datagrid("getRows")[row][cellName],"");
} */
if (!flag) {
curCondition = $("#safetyValueTable").datagrid("getRows")[row][condiName];//获得约束列的值
}
}
if (perValue == curValue && (false|| perCondition == curCondition)) {
span += 1;
} else {
var index = row - span;
$("#safetyValueTable").datagrid('mergeCells', {
index: index,
field: cellName,
rowspan: span,
colspan: null
});
span = 1;
perValue = curValue;
if (!flag) {
perCondition = curCondition;
}
}
}
}
}

function isNotNull(data) {
if (data == "" || data == null) {
return false;
} else return true;
}

在datagrig中的加载:

onLoadSuccess: function(data) {
if (data.rows.length > 0) {
mergeCells(data);
}
},

以上参考了网络上的案例,但是来源找不到了~

此外,使用easyui自带的mergecell方法可能导致加载速度变慢,如果数据量较大时,最好还是自己写js和HTML拼凑页面~

 

posted @ 2016-04-29 14:10  动感回旋踢  阅读(908)  评论(0编辑  收藏  举报