在使用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实现表头合并功能插图

关注公众号:程序新视界,一个让你软实力、硬技术同步提升的平台

除非注明,否则均为程序新视界原创文章,转载必须以链接形式标明本文链接

本文链接:http://choupangxia.com/2019/09/09/jqgrid%e5%ae%9e%e7%8e%b0%e8%a1%a8%e5%a4%b4%e5%90%88%e5%b9%b6%e5%8a%9f%e8%83%bd/