easyUI 动态合并单元格

最新推荐文章于 2024-12-29 06:12:56 发布

原创最新推荐文章于 2024-12-29 06:12:56 发布 · 994 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easyUi 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在easyUI中动态地合并表格的多列单元格，并展示了一种方法，使得在一列合并的单元格内可以添加链接，提供了一张效果图及详细的操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

合并多列单元格，并在一列合并后的单元格中使用链接

效果图

封装合并单元格方法

    /**
     * EasyUI DataGrid根据字段动态合并单元格
     * 参数 tableID 要合并table的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 = "";
        for (var j = ColArray.length - 1; j >= 0; j--) {
            PerTxt = "";
            tmpA = 1;
            tmpB = 0;
            for (var 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
                    });
                    tmpA = 1;
                }
                PerTxt = CurTxt;
            }
        }
    }

调用该方法

onLoadSuccess:function(param){
                registerButtonStatus("tt");
                //根据centId分组合并附件单元格
                if (param.rows.length > 0) {
                    mergeCellsByField("tt", "area,centId,centCode,centName");
                }
            }