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,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）凍結列必須是最前面的列，如果兩個凍結列中間有一個隱藏列，則隱藏列之后的凍結列會失效

     再次強調：請將凍結列放置一堆，並位於列集合的最前面