jqGrid表格合并行

一 在jqGrid的colModel中增加cellattr,会给每一个单元格设置一个ID

 {
     name: 'goodsOutStorage.outNumber',
     index: 'goodsOutStorage.outNumber',
     width: 120,
     align: "center",
     cellattr:function (rowId){
     return 'id="goodsOutStorageoutNumber'+rowId+'"'
     }
 },

二 封装合并行的公共方法

​ 主要是判断上一行与下一行的数据,如果相等就记录合并行数加1,并隐藏这一行,不等就直接显示这一行

function MergerRowspan(gridName, cellArr) {
    var CellName = cellArr.join('.')   //取值 / 列名
    var CellValue = cellArr.join('')    //取ID
    //得到显示到界面的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]);
            if (before[CellName] == end[CellName]) {
                rowSpanTaxCount++;
                $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
            } else {
                rowSpanTaxCount = 1;
                break;
            }
            $("#" + CellValue + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
        }
    }
}

三 表格渲染结束调用方法

loadComplete: function() {
    MergerRowspan('historytable',['goodsOutStorage','outNumber'])
    MergerRowspan('historytable',['goodsOutStorage','batchNumber'])
    ...
}

四 效果展示

posted @ 2024-07-15 16:19  前端小李子  阅读(3)  评论(0编辑  收藏  举报