EasyUI 表格数据跨行跨列案列

原文链接：jQuery easyUI中实现表格的跨行跨列的方法-js教程-PHP中文网

第一个图时我按照原文链接做出来的例子，基本实现了跨行跨列操作，后面时原文例子，供大家参考！！！

    $(function () {

        $('#dg').datagrid({

            url: 'tableController.do?getTable&field=itemid,productid,listprice,unitcost,attr1,status',

            singleSelect: true,

            collapsible: true,//收起表格的内容

            width: 700,

            height: 450,

            loadMsg: '数据加载中...',

            singleSelect: true,

            fitColumns: true,

            rownumbers: true,//显示行数

            idField: 'itemid',

            pagination: true,//显示分页

            pageSize: 20,

            pageNumber: 1,

            pageList: [20, 40, 60, 80, 100],

            columns: [[

                {field: '', title: '95598账目计算表', colspan: 6, align: 'center', height: 30}

            ], [

                {field: 'itemid', title: '部门名称', rowspan: 2, align: 'center'},

                {field: '', title: '统计各部门的账目总和：50亿美元', colspan: 5, align: 'right'}

            ], [

                {field: 'productid', title: '目录', width: 100, align: 'center'},

                {field: 'listprice', title: '部门一', width: 100, align: 'center'},

                {field: 'unitcost', title: '部门二', width: 100, align: 'center'},

                {field: 'attr1', title: '部门三', width: 100, align: 'center'},

                {field: 'status', title: '部门四', width: 100, align: 'center'}

            ]],

            onLoadSuccess: function (data) {

                if (data.rows.length > 0) {                 //调用mergeCellsByField()合并单元格

                    mergeCellsByField("dg", "itemid");                 // 重新载入当前页面数据

                    setTimeout("$('#dg').datagrid('reload');", 5000);

                }

            }


        });

        $('#dg').datagrid('getPager').pagination({

            beforePageText: '',

            afterPageText: '/{pages}',

            displayMsg: '{from}-{to}共 {total}条',

            showPageList: true,

            showRefresh: true,

            onBeforeRefresh: function (pageNumber, pageSize) {

                $(this).pagination('loading');

                $(this).pagination('loaded');

            }

        });

    })

function mergeCellsByField(tableID, colList) {
        let ColArray = colList.split(",");
        let tTable = $("#" + tableID);
        let TableRowCnts = tTable.datagrid("getRows").length;
        let tmpA;
        let tmpB;
        let PerTxt = "";
        let CurTxt = "";
        let alertStr = "";
        for (let j = ColArray.length - 1; j >= 0; j--) {
            PerTxt = "";
            tmpA = 1;
            tmpB = 0;
            for (let 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;
            }

        }

    }

后台代码

    @RequestMapping(params = "restructureWfWorkStatisticsTest")

    public void getTable(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {


        List<Map<String, Object>> listResults = new ArrayList<>();


        String[] str = {"满意数", "不满意数", "满意率", "合计", "部门的总共数", "部门满意率"};

        String[] item = {"满意度", "消息", "评价", "总计"};

        int j = 0;
        int k = 0;

        try {

            for (int i = 0; i < 24; i++) {

                Map map = new HashMap();
                if (i / 6 == j) {
                    map.put("itemid", item[j]);
                    map.put("productid", str[k]);
                    map.put("listprice", new Random().nextInt(100));
                    map.put("unitcost", new Random().nextInt(100));
                    map.put("attr1", new Random().nextInt(100));
                    map.put("status", new Random().nextInt(100));
                    k++;
                } else {
                    ++j;
                    k = 0;
                    map.put("itemid", item[j]);

                    map.put("productid", str[k]);

                    map.put("listprice", new Random().nextInt(100));

                    map.put("unitcost", new Random().nextInt(100));

                    map.put("attr1", new Random().nextInt(100));

                    map.put("status", new Random().nextInt(100));

                    k++;

                }


                listResults.add(map);

            }
            int page = dataGrid.getPage();

            int rows = dataGrid.getRows();

            List<Map<String, Object>> listResultsEnd = new ArrayList<>();

            for (int i = (page - 1) * rows; i < page * rows; i++) {

                if (listResults.size() >= (i + 1)) {

                    listResultsEnd.add(listResults.get(i));

                }

            }


            dataGrid.setResults(listResultsEnd);

            dataGrid.setTotal(listResults.size());

            TagUtil.datagrid(response, dataGrid);


        } catch (Exception e) {

            e.printStackTrace();

        }

    }