【项目实战】---EasyUI DataGrid单元格合并
程序员文章站
2024-02-28 20:39:04
...
前言:
怎样让表格内容清楚明白,不冗余繁杂,这就要对于datagrid单元格进行合并。整个的表格效果更清楚,做过了再回头看看还是很有必要的。
核心代码:
$('#VehicleLoadingGrid').datagrid({
fitColumns: true,
rownumbers: true,
dataType: 'json',
method: 'post',
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
loadMsg: "正在加载数据,请稍候...",
url: '/VehicleLoading/GetVehicleLoadingInfoByPage',
queryParams: {
"strPlateNumber": strPlateNumber,
"strOrderNumber": strOrderNumber,
"InvoiceNumber": InvoiceNumber,
"strLoadTime": strLoadTime,
},
columns: [[
{ field: 'PlateNumber', title: '**', width: 50, align: 'left', halign: 'center' },
{ field: 'OrderNumber', title: '**', width: 50, align: 'left', halign: 'center' },
{ field: 'InvoiceNumber', title: '**', width: 50, align: 'left', halign: 'center' },
{ field: 'AirType', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'Quantity_Send', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'DriverName', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'DeliverUserName', title: '**', width: 30, align: 'left', halign: 'center' },
{ field: 'LoadingTime', title: '**', width: 50, align: 'left', halign: 'center' }
]],
//核心:
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
//调用mergeCellsByField()合并单元格
mergeCellsByField("VehicleLoadingGrid", "PlateNumber,InvoiceNumber");
}
}
/*
tableID:表格的ID
colList:需要合并的列,如果有多个,可以以,分开
*/
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;
}
}
}
效果:
总结:
第二段的代码具用通用性,只要把对应的表格id和要合并列的field传入到方法中即可,这个方法是站在“度娘”的肩膀上实现的,很是感谢,同时如果大家有更简便的方法还望多多分享哈。