jqGrid表头锁列及排序功能细节

一、jqGrid添加列的大标题

如图所示：jqGrid表格中可以为任意几列添加共同的标题头部

 

实现代码：

jQuery("#grid_id").jqGrid('setGroupHeaders',{//显示报表头部信息

            useColSpanStyle: false,

            groupHeaders:[

           {startColumnName: 'name',numberOfColumns:2, titleText: '<em>个人基本信息</em>'},

           {startColumnName: 'address',numberOfColumns: 1, titleText: '个人住址信息'}

            ]

           });  

属性解释：useColSpanStyle:此属性为false时，标题头会占一正行，没有表头则空着。为true时当为空时，下面的额列标题会占用，如下图：

{startColumnName:'name', numberOfColumns:2, titleText:

'<个人基本信息'},

其中，startColumnName:表示开始的列名，numberOfColumns:规定从startColumnName开始往后的几列都共用一个大标题。titleText:表示大标题显示的名称

 

 

 

二、jqGrid锁定列

只有在jqGrid4.1.2版本以上的jqGrid图表支持表的列锁定功能

1、主要效果，如图

在拉动横向滚动条的时候前两列的内容样式不会变动，只有后面没有被锁定的列变动。

2、实现

 在jqGrid的colModel:属性中，有一个属性为frozen,当其为true时表示要锁定该列，默认为false。当需要是需要自己手工配置为true.注意：被锁定的列必须要是连续的。然后需要用jqGrid的'setFrozenColumns'方法进行应用。

代码：colModel:[  {name:'name',index:'name', sorttype:"string", ,frozen:true}]

jQuery("#grid_id").jqGrid('setFrozenColumns');

注意：使用列锁定的功能的时候，jqGrid的sortable属性必须要为false,否则无效