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指的是從那一列開始合併，包含當前列。