Easyui 之 Treegrid 笔记

下面是详细的EasyUI之TreeGrid笔记攻略。

什么是TreeGrid

TreeGrid是EasyUI框架中的一种数据展示方式，可以将数据以树状结构进行展示。树状表格（TreeGrid）适用于层级结构比较复杂，需要层级分组的表格。

使用TreeGrid可以将父节点和子节点之间的关系用缩进和显示图标的方式进行展示，方便用户快速地获取数据和结构，并进行编辑操作。

TreeGrid的使用

创建TreeGrid

可以使用EasyUI框架提供的treegrid方法快速地创建TreeGrid，示例代码如下：

$('#treegridId').treegrid({
    url: 'data.json',  //请求的远程数据地址
    idField: 'id',     //节点的 id 字段
    treeField: 'text', // 树状结构中节点名称对应的字段
    columns: [[         //节点数据每列的定义
        {field:'id',title:'ID',width:100},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100}
    ]]
});

加载数据

通过url参数指定后台请求数据的地址，返回的数据格式一般为JSON格式。一般的数据格式需要包含id,parent,text等属性，示例数据如下：

[
    {
        "id": 1,
        "text": "节点1",
        "children": [
            {
                "id": 11,
                "text": "节点1.1",
                "children": [
                    {
                        "id": 111,
                        "text": "节点1.1.1"
                    },
                    {
                        "id": 112,
                        "text": "节点1.1.2"
                    }
                ]
            },
            {
                "id": 12,
                "text": "节点1.2"
            }
        ]
    },
    {
        "id": 2,
        "text": "节点2"
    }
]

操作节点

TreeGrid支持对节点进行增、删、改、查等操作，具体实现可以通过在TreeNode的onDblClick事件上进行，示例代码如下：

$('#treegridId').treegrid({
    url: 'data.json',  //请求的远程数据地址
    idField: 'id',     //节点的 id 字段
    treeField: 'text', // 树状结构中节点名称对应的字段
    columns: [[         //节点数据每列的定义
        {field:'id',title:'ID',width:100},
        {field:'name',title:'姓名',width:100},
        {field:'age',title:'年龄',width:100}
    ]],

    onDblClickRow: function(rowData){
        //双击节点后的操作
    }
});

示例一：增加节点

$('#treegridId').treegrid('append',{
    parent: 1,
    data: [{
        id: 13,
        text: '节点1.3'
    }]
});

示例二：删除节点

$('#treegridId').treegrid('remove', 2);

通过以上的简单示例，可以实现TreeGrid的基本操作，从而提高页面的信息展示和可操作性。