首页 > 网络编程 > JavaScript > javascript类库 > jquery > Jquery dataTables.treeGrid

Jquery dataTables.treeGrid的树形插件使用

2026-06-17 09:36:02 作者：学以智用

本文主要介绍了Jquery dataTables.treeGrid的树形插件使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

下面给你一份完整、可直接照着做的 dataTables.treeGrid 教程，包含：官方仓库/CDN、最简示例、常用配置、AJAX 异步加载、常见坑与解决。

一、插件是什么 & 官方地址

dataTables.treeGrid.js（作者：homfen）是 DataTables 的树形扩展，用来做可折叠/展开的层级表格（部门、菜单、分类等）。

GitHub：https://github.com/homfen/dataTables.treeGrid.js
在线演示：https://homfen.github.io/dataTables.treeGrid.js/
CDN（直接引用）：

<script src="https://cdn.jsdelivr.net/npm/datatables-treegrid@1.0.4/dataTables.treeGrid.min.js"></script>

二、依赖与引入顺序

必须按这个顺序：

<!-- 1. jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

<!-- 2. DataTables CSS + JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="external nofollow" >
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- 3. treeGrid 插件 -->
<script src="https://cdn.jsdelivr.net/npm/datatables-treegrid@1.0.4/dataTables.treeGrid.min.js"></script>

三、最简完整示例（复制就能跑）

HTML

<table id="myTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th></th> <!-- 展开/折叠图标列 -->
      <th>名称</th>
      <th>备注</th>
    </tr>
  </thead>
</table>

JS

$(function () {
  // 模拟层级数据（必须有 children）
  var data = [
    {
      name: "总部",
      remark: "根节点",
      children: [
        {
          name: "技术部",
          remark: "研发",
          children: [
            { name: "前端组", remark: "Web" },
            { name: "后端组", remark: "Server" }
          ]
        },
        { name: "人事部", remark: "招聘" }
      ]
    }
  ];

  // 初始化 DataTables + treeGrid
  $('#myTable').DataTable({
    data: data,
    columns: [
      { defaultContent: "", width: "30px" }, // 图标列
      { data: "name", title: "名称" },
      { data: "remark", title: "备注" }
    ],
    // 树形配置
    treeGrid: {
      left: 20,         // 子节点缩进像素
      expandAll: false, // 默认是否全部展开
      expandIcon: '<span style="color:blue;cursor:pointer;">+</span>',
      collapseIcon: '<span style="color:red;cursor:pointer;">-</span>'
    }
  });
});

四、核心配置项（treeGrid）

treeGrid: {
  left: 15,                // 子节点缩进（px）
  expandAll: true,         // 默认全部展开
  expandIcon: '<span>+</span>',   // 展开图标
  collapseIcon: '<span>-</span>', // 折叠图标
  column: 0                 // 图标放在第几列（默认 0）
}

五、AJAX 异步加载（服务器返回 JSON）

服务器返回数据格式（必须带 children）

[
  {
    "name": "总部",
    "remark": "根节点",
    "children": [
      { "name": "技术部", "remark": "研发" }
    ]
  }
]

JS 初始化

$('#myTable').DataTable({
  ajax: {
    url: "/api/getTreeData",
    type: "GET"
  },
  columns: [
    { defaultContent: "", width: "30px" },
    { data: "name", title: "名称" },
    { data: "remark", title: "备注" }
  ],
  treeGrid: { left: 20, expandAll: false }
});

六、常用 API（控制展开/折叠）

var table = $('#myTable').DataTable();
var tree = new $.fn.dataTable.TreeGrid(table);

tree.expandAll();   // 全部展开
tree.collapseAll(); // 全部折叠

七、常见坑 & 解决

图标不显示/点击没反应
- 检查引入顺序：jQuery → DataTables → treeGrid
- 确保第一列是 defaultContent: ""
子节点不缩进
- 检查 treeGrid.left 是否设置（如 20）
数据加载后树形失效
- AJAX 返回必须是带 children 的层级结构，不能扁平化
分页与树形冲突
- 建议关闭分页（paging: false），树形表格一般不分页

到此这篇关于Jquery dataTables.treeGrid的树形插件使用的文章就介绍到这了,更多相关Jquery dataTables.treeGrid内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！