JqGrid中文文档之TreeGrid

几年之前写过一个非常简单的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',  50, hidden: true, key: true },
 9             { name: 'dm', index: 'dm',  50, align: "center" },
10             { name: 'mc', index: 'mc',  180 },
11             { name: 'dd', index: 'dd', align: "center" }
12             ],
13     height: $(".Content").height() - 25,
14      $(".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 }

View Code

仔细观察在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	图标

相关阅读:
《vi和vim》学习手记（1）
2013年1月第1个周末
 Oracle基础知识Oracle不同的启动关闭方式
 2013年1月第一个周末
 《vi和vim》学习手记（2）
Oracle基础知识数据迁移
 MySQL 显示表字段及注释等信息
 什么是UCenter Home、Discuz!、SupeSite、ECShop和SupeV 这些都是什么？
mysql远程连接对用户的测试(吴龙波)
MySQL与SQL的触发器的不同写法
原文地址：https://www.cnblogs.com/jgjgjg23/p/3399723.html