JqGrid 怎么合并行

2025-10-16 20:40:38

在使用jqGrid列表控件的时候,有时候会遇到多行多列重复的内容项,如果能把行合并,则列表查看就更为清晰了;如下图:

JqGrid 怎么合并行

工具/原料

jqGrid

方法/步骤

一、colModel属性中,增加单元格ID值,以rowId为基础来增加;

代码示例:

colModel: [

                {

                    label: '供应商', name: "SupplierName", width: 200, sortable: false, align: 'center',

                    cellattr: function (rowId, tv, rawObject, cm, rdata) {

                        //合并单元格

                        return 'id=\'SupplierName' + rowId + "\'";

                    }

                },

]

上图斜体加粗部分为给这个td增加ID值;ID值的内容为当前name加上rowId即行号;加上ID值的目的是为了在下面的方法中准确的获取到需要合并的行;

二、在jqgrid的gridComplete的方法中执行对应的合并行的方法:

            gridComplete: function () {

                MergerStatistics("gridTable", 'SupplierName');

            }

如上代码,是在gridComplete这里面执行了MergerStatistics()这个方法;这个方法就是真正的合并行的方法;

三、MergerStatistics()方法代码介绍

function MergerShe(gridName, CellName) {

    //得到显示到界面的id集合

    var mya = $("#" + gridName + "").getDataIDs();

    //当前显示多少条

    var length = mya.length;

    for (var i = 0; i < length; i++) {

        //从上到下获取一条信息

        var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);

        //定义合并行数

        var rowSpanTaxCount = 1;

        for (j = i + 1; j <= length; j++) {

            //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏

            var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);

            var cellNames = CellName.split(",");

            for (var n = 0; n < cellNames.length; n++) {

                if (before[cellNames[0]] == end[cellNames[0]] ) {

                    rowSpanTaxCount++;

                    $("#" + gridName + "").setCell(mya[j], cellNames[0], '', { display: 'none' });

                } else {

                    rowSpanTaxCount = 1;

                    break;

                }

                $("#" + cellNames[0] + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);//最后合并需要合并的行与合并的行数

            }

        }

    }

}

就会如下图所示:

JqGrid 怎么合并行

注意事项

一、注意多行多列合并, MergerStatistics("gridTable", 'SupplierName,列名1,列名2'); 在方法中判断比较值是否相同的地方,相对应的加上列名1、列名2的判断;

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢