首页 > 其他分享 >jqGrid表格合并行

jqGrid表格合并行

时间:2024-07-15 16:33:54浏览次数:12  
标签:jqGrid 表格 MergerRowspan 合并 goodsOutStorage mya outNumber var

一 在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'])
    ...
}

四 效果展示

标签:jqGrid,表格,MergerRowspan,合并,goodsOutStorage,mya,outNumber,var
From: https://www.cnblogs.com/ly5926/p/18303397

相关文章

  • Vue3+Element Plus 使用sortablejs对el-table表格进行拖拽
    sortablejs官网:点击跳转一、安装sortablejsnpminstallsortablejs--save二、 页面按需引入importSortablefrom'sortablejs';三、组件方法1.temlate:<template><el-tableref="tableHeader":data="tableData"row-key="id"style=&quo......
  • vue3+Element Plus 自定义表格单选 多选
    项目背景:用vue3+elementplus做一套考试系统功能场景:添加试题中分为客观题、主观题两种类型,在客观题会出现单选题、多选题两种类型就会导致单选题只能勾选一个答案、多选题能勾选多个答案。效果图废话不说直接上代码<el-buttonclass="btn"icon="Plus"plainst......
  • css外边距合并和塌陷问题
    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并相邻(兄弟)块元素垂直外边距的合并当上下两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top的时候,他们之间的垂直间距不是margin-bottom和margin-top之和......
  • Excel自动化工具-工作簿中sheet页合并-可自行选择需要处理的工作簿
    宝子们可以选择直接下载文章顶部资源包【Excel自动化工具-工作簿中sheet页合并.xlsm】(或者在博主的资源里下载),该资源功能为:合并sheet页或者也可以自己编写宏代码,文章最后有附上源代码没有officeexcel的宝子请先安装,下载教程请点击下面链接查看:excel、word、ppt下载安装步......
  • 获取数据库表格字段描述
    USE[database1]GO/******Object:StoredProcedure[dbo].[Sp_ObjItems]ScriptDate:2024/7/1213:17:42******/SETANSI_NULLSONGOSETQUOTED_IDENTIFIERONGOcreatePROCEDURE[dbo].[CheckFormDescription]--Addtheparametersforthestoredprocedur......
  • excel表格中怎样将一列的数值全部加上一个数值
    1、打开目标文件             2、然后在B1或者其它单元格中输入数字“10”,如图所示。           3、然后鼠标右击此单元格,在右键菜单中执行“复制”命令。            4、然后选中要加10的所有数据,在右键......
  • element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态
    element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态_表格中el-checkbox默认显示选择-CSDN博客<el-tableref="multipleTable":data="tableData3"tooltip-effect="dark"style="width:100%"@selection-change="handleS......
  • ffmpeg命令合并视频,点一下脚本就可以直接合并了
    打开记事本。复制并粘贴以下代码:保存为merge_videos.bat双击merge_videos.bat文件运行脚本。@echooffchcp65001>nul::创建临时文件列表set"list=filelist.txt"ifexist"%list%"del"%list%"::将当前目录下所有mp4文件添加到文件列表for%%iin(*.mp4)do(......
  • Lingo学习(三)——工厂合并、运算符、内置函数
    一、工厂合并(一)工厂合并——生产二维矩阵【引入】sets:                                factory/1..6/:a;                  plant/1..8/:d;                    Cooperation(fact......
  • 如何用Vue3和Plotly.js创建交互式表格?
    本文由ScriptEcho平台提供技术支持项目地址:传送门Plotly.js动态生成HTML表格应用场景介绍在数据分析和可视化领域,经常需要以表格的形式展示数据。Plotly.js是一款功能强大的JavaScript库,不仅可以创建交互式图表,还可以动态生成HTML表格。代码基本功能介绍本代......