树形表格treegrid的使用心得

最新推荐文章于 2024-07-26 13:59:32 发布

洗衣粉heart

最新推荐文章于 2024-07-26 13:59:32 发布

阅读量2w

点赞数 7

分类专栏： treegrid 文章标签： easyui treegrid 树形表格

本文链接：https://blog.csdn.net/o3460765/article/details/70951259

版权

treegrid 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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