天天看点

jqgrid三级表头

针对jqgrid4.3.2进行表头扩展,效果如下:

jqgrid三级表头
jqgrid三级表头
jqgrid三级表头

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版本。

继续阅读