有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现?
需要用的jqgrid冻结列,步骤如下:
1)设置需要冻结的列属性,frozen: ture //ture:启用冻结
2)将设置了冻结的列放置在字段集合的前面部分(一定注意)
3)设置两个属性:autoScroll: false,shrinkToFit: false //当autoScroll和shrinkToFit均为false时,会出现行滚动条
4)调用jqgrid的 setFrozenColumns 方法。 $("#jqGrid").jqGrid('setFrozenColumns');
代码示例如下:
$("#jqGrid").jqGrid({ ... colModel: [ { label: '<a href="HtmlPage1.html" title="测试标题">OrderID</a>', name: 'OrderID', key: true, frozen: true, 75 }, { label: '<label title="测试标题2">Customer ID</label>', editable: true, name: 'CustomerID', 150,frozen: true, edittype: "select", editoptions: { value: "WILMK:张三;TRADH:李四" } }, { label: 'Order Date', name: 'OrderDate', editable: true, 150 }, { label: 'Freight', name: 'Freight', editable: true, 150 }, { label: 'Ship Name', name: 'ShipName', 90, editable: true, edittype: "select", editoptions: { value: "String:字符串;Vins et alcools:数值型;Int32:整型;Int64:长整型;Int16:短整型;DateTime:时间" } }, ], autoScroll: false,//当autoScroll和shrinkToFit均为false时,会出现行滚动条 shrinkToFit: false,//是否列宽度自适应。true=适应 false=不适应 ... }); $("#jqGrid").jqGrid('setFrozenColumns');//设置冻结列生效
注意:
1)冻结列与多表头会产生冲突,显示的冻结列与多表头错位。不建议同时支持冻结列和多表头
2)冻结列必须是最前面的列,如果两个冻结列中间有一个隐藏列,则隐藏列之后的冻结列会失效
再次强调:请将冻结列放置一堆,并位于列集合的最前面