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