jqgrid实现表头合并功能

• 2019 年 10 月 4 日
• 筆記

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wo541075754/article/details/100675182

在使用jqgrid的过程中，难免要用到表头合并的功能，下面为大家提供一个简单的操作方式。

首先，jqgrid列表的使用与之前的无二。

$("#jqGrid").jqGrid({           url: baseURL + 'user/list',           datatype: "json",           colModel: [               {label: '姓名', name: 'username', index: 'username', width: 20},               {label: '年龄', name: 'age', index: 'age', width: 20},               {label: '身高', name: 'height', index: 'height', width: 20}               // 省略其他列信息           ],           viewrecords: true,           height: 385,           rowNum: 10,           rowList: [10, 30, 50],           rownumbers: true,           rownumWidth: 25,           autowidth: true,           multiselect: true,           pager: "#jqGridPager",           jsonReader: {               root: "page.list",               page: "page.currPage",               total: "page.totalPage",               records: "page.totalCount"           },           prmNames: {               page: "page",               rows: "limit",               order: "order"           },           gridComplete: function () {               //隐藏grid底部滚动条               $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});           }       });

上面是一个很常规的jqgrid的列表初始化话方法，现在有三列“姓名”、“年龄”、“身高”，那么此时如果想对这三列进行一个合并标题，再生成一个统称“个人信息”，那么该如何操作呢。

方法很简单，在上面这个方法初始化之后，再执行以下方法。

#jqGrid').setGroupHeaders(      {          useColSpanStyle: true,          groupHeaders: [              {"numberOfColumns": 3, "titleText": "个人信息", "startColumnName": "username"}              // 此处省略其他列          ]      }  );

通过以上代码接口实现合并功能。其中numberOfColumns指定合并的列的数量，这里是合并3列。titleText指定合并之后的统称叫什么。startColumnName指的是从那一列开始合并，包含当前列。