jqGrid是用來實現表格的jquery外掛，使用該外掛可以輕鬆的實現前端頁面與後臺資料的AJAX互動，使用方便，最近在開發專案中要實現多行表頭的效果，在api中找到的答案是能夠實現２行表頭，那麼要實現多行該如何解決呢？

實現２行表頭的寫法如下：

//形成表格
$("#itemlist_list").jqGrid({
autowidth:true,
url:itemlist_g_url.list+"?areamark="+config.areamarkdefault,
datatype: "json",
height:'100%',
colNames:['ID','商品名稱','商品價格','預定數量','是否是合約機','是否在手機端顯示','是否下架','釋出時間'],
colModel:[
{name:'itemid',index:'itemid', width:20,key:true,align:'center'},
{name:'itemname',index:'itemname', width:80},
{name:'defaultprice',index:'defaultprice', width:40,formatter:'currency',formatoptions:{suffix:"元"},align:'center'},
{name:'bookcount',index:'bookcount', width:20,align:'center'},
{name:'dealed',index:'dealed', width:20,formatter:'select', editoptions:{value:config.cusmachine},align:'center'},
{name:'telshowed',index:'telshowed', width:30,formatter:'select', editoptions:{value:config.itemtelshow},align:'center'},
{name:'shelfed',index:'shelfed', width:20,formatter:'select', editoptions:{value:config.itemshelf},align:'center'},
{name:'publishtime',index:'publishtime', width:40, formatter:'datetime',formatoptions:{srcformat: 'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},align:'center'}
],
rowNum:20,
sortname:"itemid",
sortorder:"desc",
pager:"#itemlist_pager1",
jsonReader : {
repeatitems:false,
id:"itemid"
},
viewrecords: true,
caption: null
});

//實現２行表頭指令碼

$("#itemlist_list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName:'itemname', numberOfColumns:2, titleText: '商品介紹'},
{startColumnName:'bookcount', numberOfColumns: 2, titleText: '商品屬性'}
]
})

效果如下：

//實現3行表頭指令碼

$("#itemlist_list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName:'itemname', numberOfColumns:5, titleText: '介紹'}
]
})
$("#itemlist_list").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName:'itemname', numberOfColumns:2, titleText: '商品介紹'},
{startColumnName:'bookcount', numberOfColumns: 2, titleText: '商品屬性'}
]
})

效果如下：

多行表頭以此類推，效果如下：

我修改了jquery.jqGrid.src.js原始碼實現了此功能，見下圖

修改原始碼是為了解決表頭多行時單元格合併多行，而不是隻合併2行。
考慮不周的地方還請見諒，期待大家的建議
————————————————
版權宣告：本文為CSDN博主「鷹子」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/eagle_88/article/details/42969547