轉發: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: '主鍵', 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM