深入解析vakata/jstree基础示例：从入门到实战-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00213/article/details/148506239

深入解析vakata/jstree基础示例：从入门到实战

jstree jquery tree plugin 项目地址: https://gitcode.com/gh_mirrors/js/jstree

前言

vakata/jstree是一个功能强大且高度可定制的jQuery树形插件，广泛应用于各种需要层级结构展示的场景。本文将通过分析基础示例文件，带您全面了解jstree的核心功能和实现方式。

环境准备

要使用jstree，需要先引入必要的资源文件：

jQuery库（3.3.1版本）
jstree核心JS文件
jstree默认主题CSS文件

<link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./../../dist/jstree.min.js"></script>

基础用法解析

1. HTML结构初始化

最简单的初始化方式是通过现有的HTML结构创建树：

<div id="html" class="demo">
  <ul>
    <li data-jstree='{ "opened" : true }'>Root node
      <ul>
        <li data-jstree='{ "selected" : true }'>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>

初始化代码：

$('#html').jstree();

技术要点：

使用标准的<ul>和<li>结构定义树节点
通过data-jstree属性配置节点状态（如opened表示默认展开，selected表示默认选中）

2. JSON数据初始化

更灵活的方式是使用JSON数据初始化树结构：

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

技术要点：

每个节点是一个对象，text属性定义显示文本
children数组定义子节点
配置放在core.data中

3. 高级数据格式

jstree支持更复杂的数据格式配置：

$('#frmt').jstree({
  'core' : {
    'data' : [
      {
        "text" : "Root node",
        "state" : { "opened" : true },
        "children" : [
          {
            "text" : "Child node 1",
            "state" : { "selected" : true },
            "icon" : "jstree-file"
          },
          { "text" : "Child node 2", "state" : { "disabled" : true } }
        ]
      }
    ]
  }
});

技术要点：

state对象控制节点状态（opened/selected/disabled）
icon属性可指定节点图标（内置图标类为jstree-file等）

高级功能实现

1. AJAX动态加载

对于大型树结构，可以使用AJAX动态加载：

$('#ajax').jstree({
  'core' : {
    'data' : {
      "url" : "./root.json",
      "dataType" : "json"
    }
  }
});

2. 懒加载（Lazy Loading）

优化性能的懒加载实现：

$('#lazy').jstree({
  'core' : {
    'data' : {
      "url" : "//www.jstree.com/fiddle/?lazy",
      "data" : function (node) {
        return { "id" : node.id };
      }
    }
  }
});

技术要点：

只有当用户展开节点时才加载子节点
通过回调函数传递当前节点ID

3. 回调函数数据源

完全自定义的数据源处理：

$('#clbk').jstree({
  'core' : {
    'data' : function (node, cb) {
      if(node.id === "#") {
        cb([{"text" : "Root", "id" : "1", "children" : true}]);
      }
      else {
        cb(["Child"]);
      }
    }
  }
});

交互与事件处理

jstree提供了丰富的事件机制：

// 按钮点击选择节点
$('#evts_button').on("click", function () {
  var instance = $('#evts').jstree(true);
  instance.deselect_all();
  instance.select_node('1');
});

// 节点选择事件
$('#evts')
  .on("changed.jstree", function (e, data) {
    if(data.selected.length) {
      alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
    }
  })
  .jstree({
    'core' : {
      'multiple' : false,  // 禁用多选
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1", "id" : 1 },
            { "text" : "Child node 2" }
        ]}
      ]
    }
  });

技术要点：