有時,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