jqGrid表格插件实现多行表头的解决办法
来源:互联网 发布:win10引导ubuntu启动 编辑:程序博客网 时间:2024/05/17 14:19
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行。
考虑不周的地方还请见谅,期待大家的建议
- jqGrid表格插件实现多行表头的解决办法
- jqgrid 表格插件实现多行表头
- jqGrid插件的多个表格同步设置列宽
- jqgrid实现多级表头
- jquery的表格插件jqgrid的学习
- jqgrid表头合并和行合并,基于jquery的脚本插件
- jqGrid表格插件
- jquery表格插件jqgrid
- jqGrid 表格插件
- jqgrid表头合并和行合并,基于jquery脚本插件
- jqGrid表格多次点击行交替选中的实现
- jqGrid实现表头自动换行
- java中如何实现表格的多表头显示
- 顶部表头和侧面表头固定的表格div实现
- jqgrid实现子表格
- HTML表格多行表头,隔行变色,点击变色的实现
- CSS实现表头固定的表格
- 实现双向固定表头的表格
- 怎么解决mysql sleep线程过多的问题
- 数字万用表什么的都有“五位半”之说,到底什么是所谓的五位半?
- lotere online Nov 22nd 2014 at 06
- 第15题:单独的数字
- cursor循环查询数据库里的内容
- jqGrid表格插件实现多行表头的解决办法
- MATLAB画图如何标记特殊点
- html页面中如何设置当光标移到一个固定区域时其形状变成手型,移出时恢复
- Android 真机调试 手机驱动
- 算法导论第15章 动态规划-矩阵链乘法
- Quick-Cocos2d-x 3.2将对象(包括子对象)变灰的方法
- 【BZOJ1806】【IOI2007】Miners 矿工配餐 动态规划
- Python中的继承和override(由类的实例获取类的字符串信息)
- Linux 搭建VPN,PPTPD一键安装脚本