樹形表格treegrid的使用心得

樹形表格treegrid的使用心得

最近在做後臺管理系統的界面的時候總是需要用到樹形表格，相信大多數做後臺系統都會有同樣的需求。
今天就說一下最近使用easyui中的treegrid的心得。
- treegrid的語法

    #html
    <table id="tt"></table>

    #js
    $('#tg').treegrid({
       title:'TreeGrid with Footer',    //標題
       iconCls:'icon-ok',               //標題的圖標
       width:700,                       //寬度
       height:250,                      //長度
       rownumbers: true,                //設置爲true，則顯示帶有行號的列
       animate:true,                    //是否開啓動畫
       collapsible:true,                //是否可以摺疊
       fitColumns:true,                 //設置爲true，則會自動擴大或縮小列的尺寸以適應網格的寬度並且防止水平滾動。
       url:'treegrid_data2.json',       //獲取數據的地址
       method: 'get',                   //請求遠程數據方法的類型
       idField:'id',                    //指示那個字段是標識字段
       treeField:'name',                //定義樹節點的字段
       showFooter:true,                 //定義是否顯示行的底部
       columns:[[
           {title:'Task Name',field:'name',width:180},  //這一行就是treeField定義的樹節點的列
           {field:'persons',title:'Persons',width:60,align:'right'},
           {field:'begin',title:'Begin Date',width:80},
           {field:'end',title:'End Date',width:80},
           {field:'progress',title:'Progress',width:120,
               formatter:function(value,row){  //在treegrid中formatter只能拿到兩個參數
                   if (value){
                       var s = '<div style="width:100%;border:1px solid #ccc">' +
                               '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
                               '</div>';
                       return s;
                   } else {
                       return '';
                   }
               }
           }
       ]]
   });

treegrid獲取數據的方法

    treegrid獲取數據的方法有兩種
    一、直接寫遠程路徑
    $('#tg').treegrid({
       url: 'treegrid_data2.json'
    });
    二、在獲取數據後在賦值給data
    var treeData = {
        rows = [...]
    };
    $('#tg').treegrid({
       data: treeData
    });

rows中的數據結構

    一、這種數據結構是表面是平行的數據，根據id與_parentId來標識父子結構。
        id是根據idField這個參數自己設定的
        _parentId注意事項：
        如果沒有父節點_parentId傳null或者不傳_parentId,不能傳0(零)或者''(空字符串)
        這種數據結構中
             不論是url還是data，數據都必須是{...,rows=[]}的形式
        [{
            "id": 1,
            "name": "All Tasks",
            "begin": "3/4/2010",
            "end": "3/20/2010",
            "progress": 60,
            "iconCls": "icon-ok"
        },
        {
            "id": 2,
            "name": "Designing",
            "begin": "3/4/2010",
            "end": "3/10/2010",
            "progress": 100,
            "_parentId": 1,
            "state": "closed"
        },
        {
            "id": 3,
            "name": "Database",
            "persons": 2,
            "begin": "3/4/2010",
            "end": "3/6/2010",
            "progress": 100,
            "_parentId": 2
        }]
        二、這種結構就比較直觀了，通過children字段來標識父子
        [{
            "id": 1,
            "name": "C",
            "size": "",
            "date": "02/19/2010",
            "children": [
                {
                    "id": 2,
                    "name": "Program Files",
                    "size": "120 MB",
                    "date": "03/20/2010",
                    "children": [
                        {
                            "id": 21,
                            "name": "Java",
                            "size": "",
                            "date": "01/13/2010",
                            "state": "closed",
                            "children": [
                                {
                                    "id": 211,
                                    "name": "java.exe",
                                    "size": "142 KB",
                                    "date": "01/13/2010"
                                },
                                {
                                    "id": 212,
                                    "name": "jawt.dll",
                                    "size": "5 KB",
                                    "date": "01/13/2010"
                                }
                            ]
                        }
                    ]
                }]