【项目实战】---EasyUI DataGrid单元格合并

前言：

怎样让表格内容清楚明白，不冗余繁杂，这就要对于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:表格的IDcolList：需要合并的列，如果有多个，可以以,分开*/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传入到方法中即可，这个方法是站在“度娘”的肩膀上实现的，很是感谢，同时如果大家有更简便的方法还望多多分享哈。