几年之前写过一个非常简单的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 | 图标 |