jquery树

jQuery 树形结构插件

jQuery 提供了多种插件用于创建和管理树形结构，常见的有 jsTree、FancyTree 和 Dynatree。以下是它们的简要介绍和使用方法。

jsTree

jsTree 是一个功能强大的 jQuery 树形插件，支持拖放、复选框、异步加载等功能。以下是基本用法：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

<div id="tree"></div>

<script>
$('#tree').jstree({
  'core': {
    'data': [
      { "text": "Root node", "children": [
        { "text": "Child node 1" },
        { "text": "Child node 2" }
      ]}
    ]
  }
});
</script>

FancyTree

FancyTree 是一个灵活的树形插件，支持懒加载、键盘导航和多种主题。基本示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancytree/2.38.0/skin-win8/ui.fancytree.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancytree/2.38.0/jquery.fancytree-all.min.js"></script>

<div id="tree"></div>

<script>
$("#tree").fancytree({
  source: [
    {title: "Node 1", folder: true, children: [
      {title: "Child 1"},
      {title: "Child 2"}
    ]}
  ]
});
</script>

Dynatree

Dynatree 是另一个流行的树形插件，但目前已不再维护。基本用法：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dynatree/1.2.5/skin-vista/ui.dynatree.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dynatree/1.2.5/jquery.dynatree.min.js"></script>

<div id="tree"></div>

<script>
$("#tree").dynatree({
  children: [
    {title: "Folder 1", isFolder: true, children: [
      {title: "Item 1"},
      {title: "Item 2"}
    ]}
  ]
});
</script>

自定义树形结构

如果需要简单实现树形结构而不依赖插件，可以使用 jQuery 操作 DOM：

<ul id="tree">
  <li>Parent
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
    </ul>
  </li>
</ul>

<script>
$("#tree li").click(function(e) {
  e.stopPropagation();
  $(this).children("ul").toggle();
});
</script>

异步加载数据

对于大型树形结构，异步加载可以提高性能：

$('#tree').jstree({
  'core': {
    'data': {
      'url': '/api/tree',
      'data': function(node) {
        return { 'id': node.id };
      }
    }
  }
});

树形结构主题

大多数插件支持主题定制，可以通过 CSS 修改外观：

.jstree-default .jstree-clicked {
  background: #e0f7fa;
}

以上方法提供了从简单到复杂的树形结构实现方案，可根据项目需求选择合适的插件或自定义实现。