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數據

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