<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"  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>

<table id="myTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th></th> <!-- 展開/折疊圖標(biāo)列 -->
      <th>名稱</th>
      <th>備注</th>
    </tr>
  </thead>
</table>

$(function () {
  // 模擬層級數(shù)據(jù)（必須有 children）
  var data = [
    {
      name: "總部",
      remark: "根節(jié)點(diǎn)",
      children: [
        {
          name: "技術(shù)部",
          remark: "研發(fā)",
          children: [
            { name: "前端組", remark: "Web" },
            { name: "后端組", remark: "Server" }
          ]
        },
        { name: "人事部", remark: "招聘" }
      ]
    }
  ];

  // 初始化 DataTables + treeGrid
  $('#myTable').DataTable({
    data: data,
    columns: [
      { defaultContent: "", width: "30px" }, // 圖標(biāo)列
      { data: "name", title: "名稱" },
      { data: "remark", title: "備注" }
    ],
    // 樹形配置
    treeGrid: {
      left: 20,         // 子節(jié)點(diǎn)縮進(jìn)像素
      expandAll: false, // 默認(rèn)是否全部展開
      expandIcon: '<span style="color:blue;cursor:pointer;">+</span>',
      collapseIcon: '<span style="color:red;cursor:pointer;">-</span>'
    }
  });
});

treeGrid: {
  left: 15,                // 子節(jié)點(diǎn)縮進(jìn)（px）
  expandAll: true,         // 默認(rèn)全部展開
  expandIcon: '<span>+</span>',   // 展開圖標(biāo)
  collapseIcon: '<span>-</span>', // 折疊圖標(biāo)
  column: 0                 // 圖標(biāo)放在第幾列（默認(rèn) 0）
}

[
  {
    "name": "總部",
    "remark": "根節(jié)點(diǎn)",
    "children": [
      { "name": "技術(shù)部", "remark": "研發(fā)" }
    ]
  }
]

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

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

tree.expandAll();   // 全部展開
tree.collapseAll(); // 全部折疊