jqgrid实现表头合并功能

在使用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指的是从那一列开始合并，包含当前列。

原文链接：《jqgrid实现表头合并功能》