欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【项目实战】---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;
        }
    }
}

效果:

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

总结:

第二段的代码具用通用性,只要把对应的表格id和要合并列的field传入到方法中即可,这个方法是站在“度娘”的肩膀上实现的,很是感谢,同时如果大家有更简便的方法还望多多分享哈。