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',  50, hidden: true, key: true },
            { name: 'dm', index: 'dm',  50, align: "center" },
            { name: 'mc', index: 'mc',  180 },
            { name: 'dd', index: 'dd', align: "center" }
            ],
    height: $(".Content").height() - 25,
     $(".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	图标

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