jstree使用教程

最新推荐文章于 2026-05-17 13:26:42 发布

原创最新推荐文章于 2026-05-17 13:26:42 发布 · 2.9w 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery插件 #树形目录-jstre

html5+ 同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文是JStree的使用教程，介绍了如何包含资源、创建基本示例、自定义事件和图标，以及AJAX和JSON数据的使用。通过实例展示了JStree生成树形目录的功能，并提供了相关代码示例。

阿发原创，博客地址：http://blog.csdn.net/u012954072

本文介绍JQuery插件–JStree的使用，JStree用于生成树形目录。先贴一张简单的效果图并输出当前节点的名称

效果图

所需资源下载：http://download.csdn.net/detail/u012954072/9670907

JStree官网：https://www.jstree.com

官网的文档讲比较详细，如果能打开建议直接看官网的文档。如果不能打开，可以参考下面的使用教程：

1.需要包含的资源

a. 需要jstress定义的样式

样式文件在dist/themes/default/style.min.css 中，所以html页面中需要添加代码

<link rel="stylesheet" href="../dist/themes/default/style.min.css" />

需要包含CDNJS的css文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

b. 需要使用jQuery1.9.0以上：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

c. 包含JStree的js文件：

<script src="dist/jstree.min.js"></script>

使用CDNJS的代码为：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

2.实现最简易的JStree例子

JStree需要使用一个div当做其容器并需要id属性用于生成JStree ：
<div id="jstree_div"> </div>
JStree的节点信息存储在<ul> <li> </li> </ul>中，需要多层的时嵌套多层`<ul><li> </li></ul>即可。

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

　　在$(document).ready(function(){ }) 中使用JStree生成命令： $('#jstree').jstree();
jstree支持很多监听事件，这里设置一个当选的节点发生变化时输出选中的节点的内容:

$('#jstree').on("changed.jstree", function (e, data) {
         alert(data.instance.get_node(data.selected).tex)t;   //存储当前选中的区域的名称
   });

以下是完整的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="../dist/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
     <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>

  <!-- 4 include the jQuery library  你自己的jquery.js文件位置-->
  <script src="../js/jQuery.js"></script>
  <!-- 5 include the minified jstree source  你自己的jstree.js文件位置-->
  <script src="../js/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree();
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      alert(data.instance.get_node(data.selected).text);      //输出当前选中的区域的名称
    });
  </script>
</body>
</html>

3.JStree自定义触发事件和图标

这部分讲如何使用一些常用的属性、使用JStree监听的事件。
　　常用属性:　
　　如果在<li>标签中添加class="jstree-open" 则节点是默认打开，添加` class="jstree-clicked" 则节点是处于被选中的状态。效果如下所示：

　　打开并选中节点

 还可以使用 data-jstree  来设置节点的特征

<li data-jstree='{"opened":true,"selected":true, "disabled":true,"icon":"../img/liya.img"}' >

　　opened：打开，select：选中，disabled：废弃，icon：设置节点名称前面的图标，可以使用矢量图标，如iconfont之类的。
　　修改图标的效果如下所示：
　　　　　　　　　　
监听事件的使用方法：
　　上面的示例中已经使用JStree监听的事件–节点变化事件：changed.jstree。
　　JStree可以监听的事件： https://www.jstree.com/api/#/?q=.jstree%20Event&f=changed.jstree
　　JStree官方API中表示可以监听的事件的颜色如下所示。
　　　　　　　　　 API中监听的事件

$('#[JStree的ID]').on('[监听的是事件]', function (e, data) {
     //需要进行的操作
})

查看官网的中的changed.jstree Event 事件的介绍如下所示：

　　这里来继续使用监听的事件来改进最初版的JStree，建立起JStree之后可以发现如果要展开JStree只能点击前面的小三角才能展开文件，用户体验太差，这里改进的方法是当点击节点的时候就展开，当节点被选中的时候就打开节点下的信息。
　　查阅API中有个获取实例的方法：
　　

$('#tree2').jstree(true); // get an existing instance (will not create new instance)

　　
　　然后查找API中又有一个打开或关闭节点的方法：
　　
　　　　　　　　　

则在2中简单中的例子中加上以下代码就可以实现点击节点名称即可打开或关闭节点：

//选中节点的时候打开或关闭节点
 $('#jstree').on('changed.jstree', function (e, data) {
    $('#jstree').jstree(true).toggle_node(data.selected);
 })

4.AJAX和JSON数据

JStree还可以使用ajax和json数据。
　　使用ajax时的数据格式和之前的一样，都是使用<ul><li>，唯一不同之处是HTML代码不是在容器中而是在服务器中，只需要在$.jstree.defaults.core.data 的url中添加html内容即可：

$('#tree').jstree({
  'core' : {
  'data' : {
    'url' : 'ajax_nodes.html',
    'data' : function (node) {
      return { 'id' : node.id };
    }
  }
});
// Example AJAX response:
<ul>
<li>Node 1</li>
<li class="jstree-closed">Node 2</li>
</ul>

　　JSON数据： json数据需要特定的格式，一种是指定子节点的格式，一种是指定父节点的id的格式，这连个格式都可以设置节点的通用属性：text、icon、opened、disabled、selected。不需要icon时，可以指定icon为false。
　　指定子节点的格式如下所示：

// Expected format of the node (there are no required fields)
{
     id          : "string" // will be autogenerated if omitted
     text        : "string" // node text
     icon        : "string" // string for custom
     state       : {
       opened    : boolean  // is the node open
       disabled  : boolean  // is the node disabled
       selected  : boolean  // is the node selected
     },
     children    : []  // array of strings or objects  这里面的格式和这个格式一样
     li_attr     : {}  // attributes for the generated LI node
     a_attr      : {}  // attributes for the generated A node
}

效果如下所示：

　　　　使用json数据生成jstree
　　　　
指定父节点id的格式如下所示：

// Alternative format of the node (id & parent are required)
{
  id          : "string"// requiredparent      : "string"// required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

父节点ID的效果：

父节点ID数据生成效果

　stree简单使用用以上即可，jstree中有许多事件、属性，大家能看官网的直接参考官网。

　　在页面任何地方获取选中的节点的jquery代码如下：

$('#jstree').jstree(true).get_selected(true)[0]

上面这种方式获取的的是一个jstree对象，当使用html、json方法给节点设定了id、text值时，可以使

 $('#jstree').jstree(true).get_selected(true)[0].id、$('#jstree').jstree(true).get_selected(true)[0] .text

获取当前对象的id值和text值。 
 以上就是jstre的一些基本的使用方法，对于一些简单应用基本可以满足需求了。