幾年之前寫過一個非常簡單的jqgrid屬性說明。
今天又用到jqgrid這個控件了，搗鼓了許久，第一個treegrid完成了
1 jQuery("#list1").jqGrid({ 2 url: 'NBuilding.aspx?oper=GetTreeJson&t=' + new Date().getTime(), 3 treedatatype: "json", 4 datatype: 'json', 5 mtype: "POST", 6 colNames: ["ID", "代碼", "名稱", "列1"], 7 colModel: [ 8 { name: 'id', index: 'id', width: 50, hidden: true, key: true }, 9 { name: 'dm', index: 'dm', width: 50, align: "center" }, 10 { name: 'mc', index: 'mc', width: 180 }, 11 { name: 'dd', index: 'dd', align: "center" } 12 ], 13 height: $(".Content").height() - 25, 14 width: $(".Content").width() - 5, 15 treeGrid: true,//啟用樹型Grid功能 16 treeGridModel: 'adjacency',//表示返回數據的讀取類型，分為兩種：和adjacency 17 ExpandColumn: 'mc',//樹型結構在哪列顯示 18 caption: "" 19 });
上面這是主要的js代碼
特別要說明的是treeGridModel分為兩種：nested和adjacency；默認值：nested
再看一下使用adjacency方式,服務器返回的JSON數據
1 { 2 "total": 12, 3 "records": 1, 4 "page": 1, 5 "rows": [ 6 { 7 "id": 1, 8 "cell": [ 9 1, 10 "QY0001", 11 "南開區", 12 0, 13 0, 14 0, 15 false, 16 true, 17 true 18 ] 19 }, 20 { 21 "id": 4, 22 "cell": [ 23 4, 24 "LY0007", 25 "集團", 26 0, 27 1, 28 1, 29 false, 30 false, 31 true 32 ] 33 }, 34 { 35 "id": 6, 36 "cell": [ 37 6, 38 "LC0006", 39 "辦公地點二", 40 0, 41 2, 42 4, 43 false, 44 false, 45 true 46 ] 47 }, 48 { 49 "id": 7, 50 "cell": [ 51 7, 52 "FJ0013", 53 "201", 54 0, 55 3, 56 6, 57 false, 58 false, 59 true 60 ] 61 }, 62 { 63 "id": 10, 64 "cell": [ 65 10, 66 "XL0014", 67 "電腦辦公", 68 0, 69 4, 70 7, 71 true, 72 false, 73 true 74 ] 75 }, 76 { 77 "id": 8, 78 "cell": [ 79 8, 80 "FJ0014", 81 "202", 82 0, 83 3, 84 6, 85 false, 86 false, 87 true 88 ] 89 }, 90 { 91 "id": 11, 92 "cell": [ 93 11, 94 "XL0015", 95 "機房空調", 96 0, 97 4, 98 8, 99 true, 100 false, 101 true 102 ] 103 }, 104 { 105 "id": 2, 106 "cell": [ 107 2, 108 "QY0003", 109 "西青區", 110 28.5, 111 0, 112 0, 113 false, 114 true, 115 true 116 ] 117 }, 118 { 119 "id": 3, 120 "cell": [ 121 3, 122 "LY0006", 123 "A座", 124 28.5, 125 1, 126 2, 127 false, 128 false, 129 true 130 ] 131 }, 132 { 133 "id": 5, 134 "cell": [ 135 5, 136 "LC0005", 137 "辦公地點三", 138 28.5, 139 2, 140 3, 141 false, 142 false, 143 true 144 ] 145 }, 146 { 147 "id": 9, 148 "cell": [ 149 9, 150 "XL0013", 151 "測試表（.252）", 152 14.9, 153 3, 154 5, 155 true, 156 false, 157 true 158 ] 159 }, 160 { 161 "id": 12, 162 "cell": [ 163 12, 164 "XL0017", 165 "兩塊表同時測試", 166 13.6, 167 3, 168 5, 169 true, 170 false, 171 true 172 ] 173 } 174 ] 175 }
仔細觀察在cell數組，我們只定義了4列，非treeGrid時我們返回4列就可以了
但是在adjacency方式我們需要在原本的4列數據之后再增加如下字段數據來支持TreeGrid
adjacency方式：
| 列 | 解釋 |
| level_field | 節點的級別，默認最高級為0 |
| parent_id_field | 該行數據父節點的id |
| leaf_field | 是否為葉節點，為true時表示該節點下面沒有子節點了 |
| expanded_field | 是否默認展開狀態 |
| loaded_field | 是否已經加載過子節點（為false時點擊節點會自動加載子節點） |
| icon_field | 圖標 |
nested方式：
| 列 | 解釋 |
| level_field | 節點的級別，默認最高級為0 |
| left_field | 用來確定這個節點的子節點ID開始數 |
| right_field | 用來確定這個節點的子節點ID結束數 |
| lead_field | 是否為葉節點，為true時表示該節點下面沒有子節點了 |
| expanded_field | 是否默認展開狀態 |
| loaded_field | 是否已經加載過子節點（為false時點擊節點會自動加載子節點） |
| icon_field | 圖標 |