jagrid 多表头 转自(http://blog.csdn.net/eagle_88/article/details/42969547)
2017-02-08 11:40
519 查看
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原代码实现了此功能,见下图
把源码4656行的 $th.attr("rowspan", "2");
改为:var rowSpanLen = $th.parent().siblings("tr").length;
if(rowSpanLen==0){
rowSpanLen=2;
}else{
rowSpanLen=rowSpanLen+1;
}
$th.attr("rowspan", rowSpanLen);
修改原代码是为了解决表头多行时单元格合并多行,而不是只合并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原代码实现了此功能,见下图
把源码4656行的 $th.attr("rowspan", "2");
改为:var rowSpanLen = $th.parent().siblings("tr").length;
if(rowSpanLen==0){
rowSpanLen=2;
}else{
rowSpanLen=rowSpanLen+1;
}
$th.attr("rowspan", rowSpanLen);
修改原代码是为了解决表头多行时单元格合并多行,而不是只合并2行。
考虑不周的地方还请见谅,期待大家的建议
相关文章推荐
- http://blog.csdn.net/CathyEagle/archive/2006/04/25/677425.aspx
- http://blog.csdn.net/lizanhong/archive/2004/07/15/42459.aspx
- VMware虚拟机的网络设置(转至http://blog.csdn.net/hlbbs/)
- http://blog.csdn.net/hkbarton/
- 我的blog地址是 http://blog.csdn.net/asign
- 一个有趣的查找--搜索最大值所在的ID号 (轉自:http://blog.csdn.net/dhlhh)
- (java:学习)voctor类方法中的疑惑(操作元素的方法)http://blog.csdn.net/inber
- 为你的Blog打造个性日历控件 摘自 http://blog.csdn.net/wenweimin/archive/2004/08/20/79873.aspx
- Eclipse基础--Eclipse启动过程http://writeblog.csdn.net/EditGalleries.aspx
- 今天在http://blog.csdn.net上建立了自己的Blog
- http://blog.csdn.net/chensheng913/
- http://blog.csdn.net/sinapaper/
- 好的原程序做出好的软件(来自:http://blog.csdn.net/i_like_cpp)
- MySQL数据类型(http://blog.csdn.net/i_like_cpp/)
- 转贴一个JAVA数据库连接大全!!_http://blog.csdn.net/lxblg
- http://blog.csdn.net/freefalcon/archive/2004/07/28/54839.aspx
- http://blog.csdn.net/arielxp/archive/2004/06/27/27929.aspx
- 在ASP.Net 中使用实现windows登陆的方法. (轉自tainkai的專欄.http://blog.csdn.net/tainkai)
- 使用观察者(Observer)实现对象监听 (转自http://blog.csdn.net/kalex)
- 设计模式读书笔记(读后感) 摘自:http://blog.csdn.net/shanhe/archive/2004/12/12/214122.aspx