jqGrid表格插件实现多行表头的解决办法
2015-01-21 16:00
288 查看
jqGrid是用来实现表格的jquery插件,使用该插件可以轻松的实现前端页面与后台数据的AJAX交互,使用方便,最近在开发项目中要实现多行表头的效果,在api中找到的答案是能够实现2行表头,那么要实现多行该如何解决呢?
实现2行表头的写法如下:
//形成表格
$("#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
});
//实现2行表头脚本
$("#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行。
考虑不周的地方还请见谅,期待大家的建议
实现2行表头的写法如下:
//形成表格
$("#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
});
//实现2行表头脚本
$("#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行。
考虑不周的地方还请见谅,期待大家的建议
相关文章推荐
- jqgrid 表格插件实现多行表头
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
- HTML table 锁定表格头并实现表头与下面宽度动态对齐不借助JUQERY 插件
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- 使用jqGrid表格插件不能翻页之解决问题的方法
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- 黄聪:jquery.bootgrid表格插件有的属性(visibleInSelection、cssClass、headerCssClass、headerAlign)不能识别的解决办法
- chrome不支持jqgrid表格按返回数据顺序显示的解决办法
- 130517Dev GridControl建立多行复杂表头(Banded View)时,统计列与对应列无法对齐的解决办法
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
- asix2eclipse插件生成文件service.xml问题及解决办法.txt
- css+html实现横纵表头锁定的表格
- .net导出excel无表格线解决办法(转载)
- 新安装后部分插件状态显示为不正常的解决办法
- 插件解压到eclipse目录后不能在ide中出现的解决办法
- ASP.NET基础教程-DataGrid表格控件-DataGrid实现双表头
- 在 ASP.NET 上实现锁定表头、支持滚动的表格的做法
- 在 ASP.NET 上实现锁定表头、支持滚动的表格的做法
- pligg9.7beta的后HTML编辑器插件的安装(tinymce_2_1_1_1)(以及使用中遇到的点滴问题解决办法)