异常教程

jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，如何高效地展示具有层级关系的数据，一直是开发者关注的焦点。例如，组织架构中的部门与员工关系、文件系统的目录与文件结构，或是项目管理中的任务层级划分等场景，都需要一种既能体现树形结构，又能展示详细数据的组件。jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 正是为此设计的解决方案。它结合了传统数据表格（DataGrid）与树形控件（Tree）的优势，通过树形层级关系展示数据，同时支持表格的列定义、分页、排序等高级功能。本文将从零开始讲解 Treegrid 的核心概念、配置方法、实战案例，帮助开发者快速掌握这一工具。

一、什么是 Treegrid？

Treegrid 是 jQuery EasyUI 框架中一个功能强大的插件，其名称直观地体现了它的特性：

  • Tree（树形结构）：支持多级嵌套的父子节点关系，通过展开/折叠操作管理层级数据。
  • Grid（数据网格）：具备类似表格的功能，可以定义列、显示数据，并支持排序、过滤、分页等操作。

通过 Treegrid，开发者可以用表格形式展示数据，同时保留树形结构的层级关系。例如，在展示公司部门时，可以将部门作为父节点，员工作为子节点，并在表格中显示员工的姓名、职位、入职时间等信息。

树形网格 vs 传统表格

传统表格（如 EasyUI 的 DataGrid）适用于扁平化数据，但无法直接展示层级关系。而 Treegrid 的优势在于：

  1. 直观的层级展示：通过缩进和展开符号，用户能快速理解数据的上下级关系。
  2. 高效的数据操作：支持对树形节点的展开/折叠、增删改查等操作，同时保持表格的交互功能。
  3. 灵活的列定义：可自定义列的标题、宽度、对齐方式，甚至实现动态列渲染。

二、快速入门：Treegrid 的基础配置

要开始使用 Treegrid，需先引入 jQuery EasyUI 的核心文件。假设已正确引入 CSS 和 JS 文件，接下来通过一个简单的示例演示如何创建 Treegrid：

<table id="treegrid"></table>

<script>
$(function() {
    $('#treegrid').treegrid({
        url: '/data/treegrid_data.json',  // 数据接口路径
        fitColumns: true,                // 自动调整列宽
        columns: [[
            { field: 'name', title: '名称', width: 100 },
            { field: 'type', title: '类型', width: 80 },
            { field: 'size', title: '大小', width: 80 }
        ]]
    });
});
</script>

关键配置项解释

  1. url：指向数据源的接口地址，返回 JSON 格式的数据。
  2. columns：定义表格的列，每个列包含 field（对应数据字段）和 title（列标题）。
  3. fitColumns：是否自动调整列宽以适应表格宽度。

三、数据格式与层级关系

Treegrid 的数据需符合特定的 JSON 结构，以支持树形层级。每个节点需要包含以下字段：

  • id: 节点唯一标识。
  • text: 节点在树中的显示文本（可选，若未定义则使用 name 字段）。
  • pid: 父节点的 id，根节点的 pid 通常设为 null 或 0。
  • 其他字段：根据业务需求定义，如 name、size、type 等。

示例数据格式

[
    {
        "id": 1,
        "pid": null,
        "name": "根目录",
        "type": "文件夹",
        "children": [
            {
                "id": 2,
                "pid": 1,
                "name": "文档",
                "type": "文件夹",
                "children": [
                    { "id": 3, "pid": 2, "name": "报告.docx", "type": "文档" }
                ]
            }
        ]
    }
]

数据加载方式

Treegrid 支持两种数据加载方式：

  1. 本地数据：将数据直接定义在 JavaScript 变量中，通过 data 配置项传递。
  2. 远程接口：通过 url 指向服务器端接口，适合处理大量或动态数据。

本地数据示例

$('#treegrid').treegrid({
    data: [ /* 上述 JSON 数据 */ ],
    // 其他配置...
});

四、Treegrid 的核心功能与配置详解

1. 列定义的进阶技巧

除了基础的列设置，Treegrid 还支持以下高级功能：

  • 列对齐与样式：通过 align（如 left、center、right）和 styler（自定义 CSS 样式）控制列显示。
  • 可编辑列：通过 editor 配置项，将列变为输入框、下拉菜单等可编辑控件。
  • 自定义渲染：使用 formatter 函数动态生成内容，例如将数字格式化为货币单位。
columns: [[
    {
        field: 'price',
        title: '价格',
        align: 'right',
        formatter: function(value) {
            return '¥' + value.toFixed(2);
        }
    },
    {
        field: 'status',
        title: '状态',
        editor: {
            type: 'combobox',
            options: {
                valueField: 'id',
                textField: 'text',
                data: [{id:1, text:'正常'}, {id:2, text:'停用'}]
            }
        }
    }
]]

2. 树形操作与事件

Treegrid 提供了丰富的事件，用于响应用户交互：

  • 展开/折叠事件：onExpand、onCollapse
  • 节点点击事件：onClick
  • 数据加载完成：onLoadSuccess
$('#treegrid').treegrid({
    onLoadSuccess: function() {
        console.log('数据加载完成！');
    },
    onClick: function(row) {
        alert('点击了节点：' + row.name);
    }
});

3. 懒加载与异步数据

对于大型数据集，可通过 onBeforeLoad 事件实现懒加载，仅在展开节点时请求子节点数据：

$('#treegrid').treegrid({
    onBeforeLoad: function(node, param) {
        // 根据 node.id 请求子节点数据
        param.url = '/data/children/' + node.id;
    }
});

五、实战案例：部门员工管理

以下是一个完整的 Treegrid 应用案例，展示如何构建一个部门与员工的树形网格：

<table id="orgTreegrid"></table>

<script>
$(function() {
    $('#orgTreegrid').treegrid({
        url: '/api/departments',
        idField: 'id',
        treeField: 'name',  // 树形列的字段
        columns: [[
            { field: 'name', title: '名称', width: 200 },
            { field: 'type', title: '类型', width: 100 },
            { field: 'employees', title: '员工数量', width: 100 },
            { field: 'actions', title: '操作', 
              formatter: function(value, row) {
                  return '<a href="#" onclick="editDept('+row.id+')">编辑</a>';
              }
            }
        ]],
        toolbar: [{
            text: '添加部门',
            iconCls: 'icon-add',
            handler: function() { /* 新增逻辑 */ }
        }]
    });
});
</script>

案例解析

  1. 数据接口设计：
    后端接口需返回符合 Treegrid 结构的数据，如：

    [
    {
        "id": 1,
        "name": "技术部",
        "type": "部门",
        "pid": null,
        "employees": 50,
        "children": [
            {
                "id": 2,
                "name": "前端组",
                "type": "团队",
                "pid": 1,
                "employees": 15
            }
        ]
    }
]

  2. 工具栏与操作按钮：
    通过 toolbar 配置项添加按钮，实现增删改查功能，提升用户体验。

六、Treegrid 的性能优化与常见问题

1. 数据量过大导致卡顿

  • 分页与懒加载：对大数据集启用分页（pageNumber、pageSize）或懒加载，避免一次性加载全部数据。
  • 虚拟滚动：结合第三方插件（如 easyui-virtualscroll）实现虚拟滚动，减少 DOM 节点数量。

2. 树形结构混乱

  • 确保数据中的 id 和 pid 字段无误，且层级关系符合逻辑。
  • 使用 loadFilter 函数对返回数据进行预处理，确保格式正确。

3. 列宽自适应问题

  • 若表格列宽显示异常，可尝试设置 fit: true 让 Treegrid 自适应父容器，或手动调整 width 参数。

结论

jQuery EasyUI 的 Treegrid 树形网格 是处理层级数据展示的利器，它将树形结构与表格功能无缝结合，适用于组织架构、文件系统、项目管理等复杂场景。通过本文的讲解，开发者可以掌握其核心配置、数据格式、事件交互等关键知识点，并通过实战案例快速落地。

未来，随着前端框架的演进（如 React、Vue 等），Treegrid 的使用场景可能有所变化，但其解决复杂数据展示的核心思想仍值得学习。对于需要兼容旧项目或追求轻量级解决方案的开发者，Treegrid 仍是值得推荐的工具。

通过不断实践与优化，Treegrid 可以成为开发者手中高效管理树形数据的“瑞士军刀”。

最新发布

查看更多文章