jqGrid frozencolumn

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

设置

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

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],
 //...
});

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

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:）

..
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前还原表格配置。

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

动态设置

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

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

加支付宝好友偷能量挖...

原创文章，转载请注明出处：jqGrid frozencolumn

2013-7-9评论(0)Web开发网

阅读(3371)喜欢(1)分类：jqGrid中文API