jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

下面是针对“jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍”的完整攻略：

TreeGrid 概述

TreeGrid 是基于 jQuery EasyUI 的组件之一，它可以将数据以树状结构的形式展示在表格中，支持分页、排序、过滤、展开/折叠等功能。

TreeGrid 的使用

1. 创建 TreeGrid

在页面上创建一个 div 容器，并指定容器 ID。

<div id="tt"></div>

然后，在 JavaScript 代码中调用 easyui 的 treegrid 方法初始化一个 TreeGrid：

$('#tt').treegrid({
    url: 'data.json',
    idField: 'id',
    treeField: 'name'
});

上面的代码以一个 JSON 数据源作为展示数据，其中 idField 指定 id 字段名，treeField 指定要作为树形节点的字段名。

2. 加载数据

通过 url 属性可以指定要加载数据的地址，也可以通过 data 属性指定 JSON 数据。

$('#tt').treegrid({
    url: 'data.json',
    /* 或者 */
    data: [{
        id: 1,
        name: 'node 1'
    }]
});

3. 自定义列

$('#tt').treegrid({
    columns: [[
        /* 普通列 */
        { field: 'id', title: 'ID', width: 50 },
        { field: 'name', title: '名称', width: 100 },
        { field: 'price', title: '价格', width: 50 },
        /* 自定义列，按钮 */
        { field: 'action', title: 'Action', width: 150, formatter: function(value,row,index){
            return '<a href="#">编辑</a> <a href="#">删除</a> <a href="#">详情</a>';
        }}
    ]]
});

上面代码中通过 formatter 属性自定义了一个“操作”列，按钮可以点击跳转到相关页面。

4. 分页

通过 pagination 属性可以开启分页功能：

$('#tt').treegrid({
    url: 'data.json',
    pagination: true
});

5. 扩展功能

TreeGrid 提供许多扩展功能，例如：

右键菜单：通过 onContextMenu 事件实现；
展开/折叠节点：通过 expand 和 collapse 方法实现；
排序：通过 sortName 和 sortOrder 属性实现；
过滤：通过 filterRules 属性实现等。

示例说明

示例 1

下面的代码展示了如何创建一个简单的 TreeGrid，并加载数据，开启分页功能：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TreeGrid 示例</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-easyui/1.7.0/themes/default/easyui.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-easyui/1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt"></div>
    <script>
        $(function(){
            $('#tt').treegrid({
                url: 'data.json',
                idField: 'id',
                treeField: 'name',
                pagination: true,
                columns: [[
                    { field: 'id', title: 'ID', width: 50 },
                    { field: 'name', title: '名称', width: 100 },
                    { field: 'price', title: '价格', width: 50 },
                    { field: 'action', title: 'Action', width: 150, formatter: function(value,row,index){
                        return '<a href="#">编辑</a> <a href="#">删除</a> <a href="#">详情</a>';
                    }}
                ]]
            });
        });
    </script>
</body>
</html>

其中，data.json 文件内容如下：

[
    {
        "id": 1,
        "name": "Parent 1",
        "price": 100,
        "children": [
            {
                "id": 2,
                "name": "Child 1",
                "price": 50
            },
            {
                "id": 3,
                "name": "Child 2",
                "price": 60
            }
        ]
    },
    {
        "id": 4,
        "name": "Parent 2",
        "price": 200,
        "children": [
            {
                "id": 5,
                "name": "Child 3",
                "price": 80
            },
            {
                "id": 6,
                "name": "Child 4",
                "price": 120
            }
        ]
    }
]

该示例展示了一个树形结构的数据，默认显示第一层节点，每个节点包含 ID、名称、价格等信息，同时提供了编辑、删除、查看详情的功能。

示例 2

下面的代码展示了如何通过事件处理函数扩展 TreeGrid：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TreeGrid 扩展示例</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-easyui/1.7.0/themes/default/easyui.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-easyui/1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt"></div>
    <script>
        $(function(){
            $('#tt').treegrid({
                url: 'data.json',
                idField: 'id',
                treeField: 'name',
                columns: [[
                    { field: 'id', title: 'ID', width: 50 },
                    { field: 'name', title: '名称', width: 100 },
                    { field: 'price', title: '价格', width: 50 },
                    { field: 'action', title: 'Action', width: 150, formatter: function(value,row,index){
                        return '<a href="#">编辑</a> <a href="#">删除</a> <a href="#">详情</a>';
                    }}
                ]],
                onContextMenu: function(e,row){
                    e.preventDefault();
                    $('#mm').menu('show', {left: e.pageX, top: e.pageY});
                }
            });

            $('#mm').menu({
                onClick: function(item){
                    alert(item.name);
                }
            });
        });
    </script>

    <div id="mm" class="easyui-menu" style="width:100px;">
        <div data-options="name:'edit'">编辑</div>
        <div data-options="name:'delete'">删除</div>
        <div data-options="name:'detail'">详情</div>
    </div>
</body>
</html>

该示例扩展了右键菜单功能，当鼠标右键某一行时，会弹出菜单；点击菜单项时，会弹出相应提示框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery EasyUI API 中文文档 – TreeGrid 树表格使用介绍 - Python技术站

jQuery EasyUI API 中文文档 – TreeGrid 树表格使用介绍