转发：jqgrid 设置冻结列

Posted 2020-11-25 firstcsharp

有时，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: ‘主键‘, name: ‘EmployeeId‘, hidden: true, frozen : true},
                    { label: ‘<a href="htmlPage1.html" title="测试标题">OrderID</a>‘, name: ‘OrderID‘, key: true, frozen: true,width: 75 },
                    {
                        label: ‘<label title="测试标题2">Customer ID</label>‘, editable: true, name: ‘CustomerID‘, width: 150,frozen: true,
                        edittype: "select",
                        editoptions: {
                            value: "WILMK:张三;TRADH:李四"
                        }
                    },
                    { label: ‘Order Date‘, name: ‘OrderDate‘, editable: true, width: 150 },
                    { label: ‘Freight‘, name: ‘Freight‘, editable: true, width: 150 },
                    {
                        label: ‘Ship Name‘,
                        name: ‘ShipName‘,
                        width: 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）冻结列必须是最前面的列，如果两个冻结列中间有一个隐藏列，则隐藏列之后的冻结列会失效

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

3）主键隐藏的列也需要加frozen : true

转自：https://www.cnblogs.com/senyier/p/7308595.html