jqGrid 冻结列的的方法,需要二步

  　　开发者很容易冻结/锁定jqGrid的一些列。锁定的列不会滚动出可见区域当滚动jqGrid的水平滚动条时，这样如果有很多列grid出现水平滚动条时，可以保持某些列始终可见。

设置

　　首先需要设置哪些列需要冻结或者锁定，可以在colModel中设置frozen：true，下面为示例

－收缩JavaScript代码

jQuery("#grid").jqGrid({
//...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y', frozen:true},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 //...
});

　　然后调用执行冻结／锁定的方法

－收缩JavaScript代码

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

　　注意frozen属性需要连续的，如果某列没有设置frozen属性，则从第一个设置了frozen的列开始锁定（Note that the frozen property should be set one after other. If there is a missing frozen property in the sequence then the last position which meet this criteria will be used.）【这里说的好像是从最后开始设置满足的序列开始，但是下面的列子说的确是第一个】

　　下面的代码只锁定第一列，尽管第三列也设置了frozen。（The below code will lock only the first column instead that you have set the third field to be frozen:）

－收缩JavaScript代码

..
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'name', index: 'name', width: 70, frozen:true },
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70, frozen:true},
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setFrozenColumns');

销毁

　　使用 destroyFrozenColumns方法取消（销毁）锁定列。此方法在调用setupFrozenColums前还原表格配置。

－收缩JavaScript代码

jQuery("#grid").jqGrid('destroyFrozenColumns');

动态设置

　　可以动态改变冻结的列，需要先调用destroyFrozenColumns 方法设置新冻结属性，然后再次调用 setFrozenColumns。示例给出如何将invdate列设置为冻结的列

－收缩JavaScript代码

jQuery("#mybutton").click(function(){
   jQuery("#grid")
   .jqGrid('destroyFrozenColumns');
   .jqGrid('setColProp','invdate', {frozen:true});
   .jqGrid('setFrozenColumns');
   .trigger('reloadGrid', [{current:true}]);
});

　　要使配置生效需要调用 trigger('reloadGrid').。

限制

下面限制告诉你冻结的列不能设置，失效

• 启用了树形表格时（ TreeGrid ）
• 启用了子表格（SubGrid）
• 启用了单元格编辑（cellEdit）
• 使用行编辑，冻结的列不能为编辑
• 设置了可排序的列，jqGrid的sortable设置为true或者方法
• scroll配置为true或者1
• 启用了数据分组
• 启用页脚数据行（footerrowcab参数）

来源：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:frozencolumns