jqgrid 设置冻结列

有时,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)冻结列必须是最前面的列,如果两个冻结列中间有一个隐藏列,则隐藏列之后的冻结列会失效

     再次强调:请将冻结列放置一堆,并位于列集合的最前面

原文地址:https://www.cnblogs.com/senyier/p/7308595.html