JqGrid中文文档之TreeGrid

几年之前写过一个非常简单的jqgrid属性说明。

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

 jQuery("#list1").jqGrid({
     url: 'NBuilding.aspx?oper=GetTreeJson&t=' + new Date().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代码

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

再看一下使用adjacency方式,服务器返回的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方式：

列	解释
level_field	节点的级别，默认最高级为0
left_field	用来确定这个节点的子节点ID开始数
right_field	用来确定这个节点的子节点ID结束数
lead_field	是否为叶节点，为true时表示该节点下面没有子节点了
expanded_field	是否默认展开状态
loaded_field	是否已经加载过子节点（为false时点击节点会自动加载子节点）
icon_field	图标