jsTree树控件(基于jQuery, 超强悍)[推荐]

jsTree是基于jQuery开发的树形控件，可以用来处理大量的数据和层次结构。

jsTree最基本的功能是构建树形结构，可以轻松地将任何数据转换为树形结构，并呈现出来。它的强大性在于可以通过自定义插件来拓展其功能，例如搜索、拖拽、复制/粘贴、节点编辑、多选/单选等等。

下面是使用jsTree的基本步骤：

步骤1：引入jQuery和jsTree

首先，在你的网站中引入jQuery和jsTree的JS和CSS文件。

<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 jsTree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>

在上面的代码中，我们引入了jQuery和jsTree的JS和CSS文件。

步骤2：创建HTML元素

接下来，我们需要为jsTree创建一个HTML元素，通常使用一个div元素。

<div id="jstree"></div>

步骤3：初始化jsTree

最后，我们需要初始化jsTree。我们可以通过在div元素上调用jstree()方法来实现。

$('#jstree').jstree({
  'core': {
    'data': [
      {
        "text" : "Parent Node 1",
        "children" : [
          { "text" : "Child Node 1" },
          { "text" : "Child Node 2" }
        ]
      },
      {
        "text" : "Parent Node 2"
      }
    ]
  }
});

在上面的代码中，我们使用$('#jstree')来选择div元素，并在其上调用jstree()方法。在jstree()方法中，我们传递了一个配置对象，其中'core'是必须的选项，在这里我们提供了一些树形结构数据。

现在你就可以在你的网站中看到一个简单的树形结构了。

以下为一个基础示例：

<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 jsTree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>

<div id="jstree">
  <ul>
    <li>Root node
      <ul>
        <li>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>

<script>
  $('#jstree').jstree();
</script>

输出的结果为：

- Root node
  - Child node 1
  - Child node 2

还可以配置许多jsTree的选项来满足你的需求。下面是另一个示例：

<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入 jsTree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/jstree.min.js"></script>

<div id="jstree">
  <ul>
    <li id="node1">Root node
      <ul>
        <li id="node2">Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>

<script>
  $('#jstree').jstree({
    'plugins': ['wholerow', 'dnd'],
    'core': {
      'check_callback': true,
      'data': [
        {
          "text" : "Parent Node 1",
          "children" : [
            { "text" : "Child Node 1" },
            { "text" : "Child Node 2" }
          ]
        },
        {
          "text" : "Parent Node 2"
        }
      ]
    }
  });

  $('#node2').on('select_node.jstree', function (e, data) {
    alert(data.node.text);
  });
</script>

在上面的示例中，我们使用了'plugins'选项来启用了'wholerow'和'dnd'插件。我们同时也在根节点上添加了id属性为node1，在其下的第一个子节点上添加了id属性为node2。我们还传递了另一组树形结构数据给了'data'选项。然后我们为节点node2添加了一个回调函数并在该函数中弹出了所选节点的文本。

在这个示例中，当你在页面中移动一个节点时会看到变化，同时在单击节点时会弹出一个警告框。

以上是对jsTree的简要介绍，详细的文档可以在jsTree的官方网站找到。