您的位置:首页 > 产品设计 > UI/UE

Easyui-DataGrid纵向合并单元格(根据某列合并)

2017-12-15 13:36 2616 查看
  使用Easyui-DataGrid过程用。做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法。

解决方案:

代码一

onLoadSuccess: function (data) {                      //data是默认的表格加载数据,包括rows和Total
if (data.rows.length > 0) {
//调用mergeCellsByField()合并单元格
mergeCellsByField("mygrid", "opt,buyprojectCode,buyprojectName,projectIndustryType,tenderName,agencyName,informationServiceFee,informationServiceState,fieldFee,fieldState");
}
}


代码二

/**
* 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 buyprocode = "";
var newbuyprocode = "";
var alertStr = "";
for (j = ColArray.length - 1; j >= 0; j--) {
PerTxt = "";
buyprocode = "";
tmpA = 1;
tmpB = 0;

for (i = 0; i <= TableRowCnts; i++) {
if (i == TableRowCnts) {
CurTxt = "";
newbuyprocode = "";
}
else {
CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
newbuyprocode = tTable.datagrid("getRows")[i]["buyprojectCode"];
}
if (PerTxt == CurTxt && buyprocode == newbuyprocode) {
tmpA += 1;
}
else {
tmpB += tmpA;

tTable.datagrid("mergeCells", {
index: i - tmpA,
field: ColArray[j],  //合并字段
rowspan: tmpA,
colspan: null
});

9a23
tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
index: i - tmpA,
field: "Ideparture",
rowspan: tmpA,
colspan: null
});

tmpA = 1;
}
PerTxt = CurTxt;
buyprocode = newbuyprocode;
}
}
}


在jQuery("#mygrid").datagrid的onLoadSuccess中调用mergeCellsByField
添加mergeCellsByField方法
  注:如果不需要按照某个字段合并,由系统自动合并请移除代码二中buyprocode、newbuyprocode相关代码即可
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: