JqGrid中文文档之TreeGrid

今天又用到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数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

{     "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	图标