jstree 选择节点 - Javascript

jstree 是一个基于 jQuery 的树形结构插件，它包含了各种强大的功能，如异步加载节点、拖拽等，其中包括选择节点。本文将着重介绍如何使用 jstree 实现选择节点的功能。

准备工作

在使用 jstree 之前，需要引入相关的 js 和 css 文件。

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

初始化 jstree

首先需要在 HTML 页面中创建一个 DOM 元素来显示 jstree，然后使用以下代码初始化 jstree：

$('#tree').jstree({
  'core' : {
    'data' : [
      {
        'text' : 'node1',
        'children' : [
          { 'text' : 'child1' },
          { 'text' : 'child2' }
        ]
      },
      { 'text' : 'node2' }
    ]
  }
});

以上代码中，'data' 属性表示 jstree 的数据源，这里使用了一个包含两个节点的数组来初始化 jstree。

选择节点

要选择一个 jstree 节点，需要通过节点的 id 或文本来选择。下面是一个使用 id 选择节点的例子：

$('#tree').on('click.jstree', function (e, data) {
  var nodeId = data.node.id;
  var nodeText = data.node.text;
  console.log('nodeId:' + nodeId + ',nodeText:' + nodeText);
});

以上代码中，通过监听 jstree 的 click.jstree 事件来获取被点击的节点信息，然后使用 data.node.id 或 data.node.text 获取节点的 id 和文本。

而如果要使用文本来选择节点，则可以使用以下代码：

var selectedNodes = $('#tree').jstree(true).search('node1');

以上代码中，使用 search 方法来查询文本为 'node1' 的节点。该方法返回一个数组，包含所有匹配的节点对象。

结语

到这里，我们已经通过简单的几个步骤实现了 jstree 的节点选择功能。当然，jstree 还有很多其他的功能需要去探索，可以访问 jstree 官网来了解更多。