jqgrid实现表头合并功能
版权声明：本文为博主原创文章，遵循 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指的是从那一列开始合并，包含当前列。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年09月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读