针对jqgrid4.3.2进行表头扩展,效果如下:
0.1版本用法:
jQuery("#grid_id").setComplexGroupHeaders({
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'sex', numberOfColumns: 3, titleText: '基本信息二'},
{startColumnName: 'name2', numberOfColumns: 2, titleText: '基本信息三'},
{startColumnName: 'age2', numberOfColumns: 2, titleText: '基本信息四'}
],
complexGroupHeaders:[//三级表头,和二级表头用法一样
{startColumnName:'name',numberOfColumns:5,titleText:'基本信息'}
]
});
或者:jQuery("#
grid_id ").jqGrid('
setComplexGroupHeaders ',{
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'sex', numberOfColumns: 3, titleText: '基本信息二'},
{startColumnName: 'name2', numberOfColumns: 2, titleText: '基本信息三'},
{startColumnName: 'age2', numberOfColumns: 2, titleText: '基本信息四'}
],
complexGroupHeaders:[//三级表头,和二级表头用法一样
{startColumnName:'name',numberOfColumns:5,titleText:'基本信息'}
]
});
更新,重要提示,建议使用0.2版本(兼容0.1):
0.2版本用法,可以在原有jqgrid基础上使用:
//先使用jqgrid提供的api进行,设置二级表头
jQuery("#grid_id").jqGrid("setGroupHeaders",{
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'name', numberOfColumns: 2, titleText: '基本信息一'},
{startColumnName: 'age', numberOfColumns: 2, titleText: '基本信息二'},
{startColumnName: 'name2', numberOfColumns: 2, titleText: '基本信息三'},
{startColumnName: 'age2', numberOfColumns: 2, titleText: '基本信息四'}
]
});
//单独调用该方法,设置三级表头
jQuery("#grid_id").jqGrid("setComplexGroupHeaders",{
complexGroupHeaders:[
{startColumnName:'name',numberOfColumns:4,titleText:'基本信息A'},
{startColumnName:'deptname',numberOfColumns:5,titleText:'基本信息B'}
]
});
当然你可以按照0.1版本方式来书写,建议先调用jqgrid原始api,在调用本人提供的api设置三级表头。
之前没有测试IE环境,0.2.1修复了IE下面错位的问题。建议使用0.2.1版本。
- 大小: 3.1 KB
- 大小: 3.4 KB
- 大小: 2.7 KB
分享到:
相关推荐
NULL 博文链接:https://474904099.iteye.com/blog/1846666
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
NULL 博文链接:https://vipshow.iteye.com/blog/1812381
jqGrid详解及高级应用
jgrid中实现显示的列的动态显示值,列可配置生成
jqgrid合并行、合并列 ... /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 2px solid #e2e2e2; }
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
jqGrid 高级简化配置 使jqGrid页面代码更简化
利用jquery的插件jqgrid实现表头合并、分组、合计、例子
jqGrid数据调用实例
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
自定义的用于处理GridView的固定(冻结)表头,单行或多行复杂表头不限,能兼容多种济览器版本,对tableLayout:fixed和auto这两种情况都是支持的。
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
基于jqgrid实现类似父子级树形菜单分页列表查询,让table页的行元素可以实现像ztree那样的上下级关系
jqgrid
自己学你easyui时写的,感觉挺不错的。分享一下
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid中文文档API,使用JQGRID
tableExport 中文修正+jqgrid...解决jqgrid无法获取表头问题;2.jqgrid开头有一空行问题;3.部分格式导出无扩展名问题;4.但xml中文还是乱码,ppt输出不对;5.注意参数大小写问题,必须一致,因此将所有参数名改成了小写。
JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件