树形表格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"                                }                            ]                        }                    ]                }]