EasyUi单元格合并

1.mergeCells

  $("#dg").datagrid("mergeCells", { index: index, field: "XXX", rowspan: 3})

首先来熟悉下这个合并单元格的方法吧，该方法主要有以下几个参数：index,field,rowspan,colspan

index:合并开始的索引；field:需要合并的字段；rowspan:需要合并的行数

当datagrid加载成功后，可以写在onLoadSucces方法中进行合并

*需要注意的是后台返回的数据是需要排序的，不然是没法知道index和rowspan的。手动计算的话代价大，事倍工半得不偿失

2.小试牛刀

封装一个可以合并单元格的方法

 function mergeCells(dg, field) {
                var rows = $(dg).datagrid("getRows");
                if (rows.length <= 0) return;
                //默认赋值为第一个值,field对应的值
                var fieldValue = rows[0][`${field}`];
                var rowIndex = 0; rowSpan = 0; //行索引,合并行数默认为0
                var qty = 0;//数量
                for (var i = 0; i < rows.length; i++) {
                    if (fieldValue == rows[i][`${field}`]) {
                        rowSpan++;
                        qty += rows[i].qty;
                    } else {
                        $(dg).datagrid("updateRow", { index: rowIndex, row: { "totalQty": qty } });
                        //变更时,则需要去合并单元格了
                        $(dg).datagrid("mergeCells", { index: rowIndex, rowspan: rowSpan, field: field });
                        //根据自己的需要按仓库计算商品的数量
                        $(dg).datagrid("mergeCells", { index: rowIndex, rowspan: rowSpan, field: "totalQty" });
                        //重置初始值,自己也算一行所以此时rowSpan从1开始
                        rowIndex = i; rowSpan = 1; qty = rows[i].qty;
                        fieldValue = rows[i][`${field}`];
                    }
                }
                //没有剩余分组的情况,就直接合并了
                if (rowSpan > 0) {
                    $(dg).datagrid("updateRow", { index: rowIndex, row: { "totalQty": qty } });
                    $(dg).datagrid("mergeCells", { index: rowIndex, rowspan: rowSpan, field: field });
                    //根据自己的需要按仓库计算商品的数量
                    $(dg).datagrid("mergeCells", { index: rowIndex, rowspan: rowSpan, field: "totalQty" });
                }
            }

onLoadSuccess调用

 $("#dg").datagrid({
                width: "100%",
                height: "100%",
                remoteSort:false,
                singleSelect: true,
                pagination: true,
                rownumbers: true,
                columns: [[
                    { field: "warehouse", title: "仓库", align: "center", width: 200,sortable:true },
                    { field: "product", title: "商品", align: "center", width: 200, sortable: true },
                    {field: "qty", title: "数量", align: "center", width: 200},
                    { field: "totalQty", title: "合计", align: "center", width: 200 },
                ]],
                onLoadSuccess: function (data) {
                    mergeCells("#dg", "warehouse");
                    //做搞一个全部的汇总
                    var sum = 0;
                    for (var i = 0; i < data.rows.length; i++) {
                        if (!data.rows[i].totalQty) continue;
                        sum += data.rows[i].totalQty;
                    }
                    $("#dg").datagrid("appendRow", {"warehouse":`<b>总计</b>`, "totalQty": sum });
                    var lastRowIndex = $("#dg").datagrid("getRows").length - 1;
                    $("#dg").datagrid("mergeCells", { index: lastRowIndex, colspan: 2, field: "product" });
                }
            })

显示效果