合并列中相同的单元格

最新推荐文章于 2024-06-20 13:28:39 发布

weixin_30790841

最新推荐文章于 2024-06-20 13:28:39 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengwei-cq/p/9187334.html

本文介绍如何使用jqGrid插件实现单元格合并功能。通过为特定列添加cellattr属性并利用gridComplete事件，可以定制合并行为。文章详细展示了如何通过JavaScript实现这一功能，并提供了完整的代码示例。

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

第一步：在列上加上cellattr属性

name: 'Category', index: 'Category', width: 40, align: "center",
                cellattr: function (rowId, tv, rawObject, cm, rdata) {
                    //合并单元格
                    return 'id=\'Category' + rowId + "\'";
                }

第二步：给gridComplete加方法

gridComplete: function() {
                var gridName = "tbList";
                Merger(gridName, 'Category');
            }

第三步：Merger(gridName, CellName)方法

//公共调用方法
    function Merger(gridName, CellName) {
        //得到显示到界面的id集合
        var mya = $j("#" + gridName + "").getDataIDs();
        //当前显示多少条
        var length = mya.length;
        for (var i = 0; i < length; i++) {
            //从上到下获取一条信息
            var before = $j("#" + gridName + "").jqGrid('getRowData', mya[i]);
            //定义合并行数
            var rowSpanTaxCount = 1;
            for (j = i + 1; j <= length; j++) {
                //和上边的信息对比如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                var end = $j("#" + gridName + "").jqGrid('getRowData', mya[j]);
                if (before[CellName] == end[CellName]) {
                    rowSpanTaxCount++;
                    $j("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                } else {
                    rowSpanTaxCount = 1;
                    break;
                }
                $j("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
            }
        }
    }