java jqgrid treegrid_JqGrid中文文档之TreeGrid

今天又用到jqgrid这个控件了，捣鼓了许久，第一个treegrid完成了javascript

jQuery("#list1").jqGrid({

url:'NBuilding.aspx?oper=GetTreeJson&t=' + newDate().getTime(),

treedatatype:"json",

datatype:'json',

mtype:"POST",

colNames: ["ID", "代码", "名称", "列1"],

colModel: [

{ name:'id', index: 'id', width: 50, hidden: true, key: true},

{ name:'dm', index: 'dm', width: 50, align: "center"},

{ name:'mc', index: 'mc', width: 180},

{ name:'dd', index: 'dd', align: "center"}

],

height: $(".Content").height() - 25,

width: $(".Content").width() - 5,

treeGrid:true,//启用树型Grid功能

treeGridModel: 'adjacency',//表示返回数据的读取类型，分为两种：和adjacency

ExpandColumn: 'mc',//树型结构在哪列显示

caption: ""});

上面这是主要的js代码html

特别要说明的是treeGridModel分为两种：nested和adjacency；默认值：nestedjava

再看一下使用adjacency方式,服务器返回的JSON数据json

{

"total": 12,

"records": 1,

"page": 1,

"rows": [

{

"id": 1,

"cell": [

1,

"QY0001",

"南开区",

0,

0,

0,

false,

true,

true

]

},

{

"id": 4,

"cell": [

4,

"LY0007",

"集团",

0,

1,

1,

false,

false,

true

]

},

{

"id": 6,

"cell": [

6,

"LC0006",

"办公地点二",

0,

2,

4,

false,

false,

true

]

},

{

"id": 7,

"cell": [

7,

"FJ0013",

"201",

0,

3,

6,

false,

false,

true

]

},

{

"id": 10,

"cell": [

10,

"XL0014",

"电脑办公",

0,

4,

7,

true,

false,

true

]

},

{

"id": 8,

"cell": [

8,

"FJ0014",

"202",

0,

3,

6,

false,

false,

true

]

},

{

"id": 11,

"cell": [

11,

"XL0015",

"机房空调",

0,

4,

8,

true,

false,

true

]

},

{

"id": 2,

"cell": [

2,

"QY0003",

"西青区",

28.5,

0,

0,

false,

true,

true

]

},

{

"id": 3,

"cell": [

3,

"LY0006",

"A座",

28.5,

1,

2,

false,

false,

true

]

},

{

"id": 5,

"cell": [

5,

"LC0005",

"办公地点三",

28.5,

2,

3,

false,

false,

true

]

},

{

"id": 9,

"cell": [

9,

"XL0013",

"测试表(.252)",

14.9,

3,

5,

true,

false,

true

]

},

{

"id": 12,

"cell": [

12,

"XL0017",

"两块表同时测试",

13.6,

3,

5,

true,

false,

true

]

}

]

}

仔细观察在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方式：ui

列

解释

level_field

节点的级别，默认最高级为0

left_field

用来肯定这个节点的子节点ID开始数

right_field

用来肯定这个节点的子节点ID结束数

lead_field

是否为叶节点，为true时表示该节点下面没有子节点了

expanded_field

是否默认展开状态

loaded_field

是否已经加载过子节点(为false时点击节点会自动加载子节点)

icon_field

图标

转载自：http://www.cnblogs.com/zzjj296/p/3399723.htmlurl