依赖：
jquery.js
jstree.js
//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css

备注：
绑定页面元素可以直接选中，绑定json数据则需要在ready.jstree事件中选中。

0、从 DOM 中删除 jstree 的所有痕迹，并销毁所有的实例
$.jstree.destroy ()

1、创建实例
1)直接绑定页面元素
$('#jstree').jstree();
2)绑定json数据

$('#jstree').jstree({

	'core' : {

	'data' : [ {

			"id" : "node1",

			"text" : "Root node 1",

			"children" : [ {

			"id" : "child_node_1",

			"text" : "Child node 1",

			"selected" : true

		}, {

			"id" : "child_node_2",

			"text" : "Child node 2"

		} ]

	}, {

		"id" : "node2",

		"text" : "Root node 2"

	} ]

	}

});

　　

2、获取一个已存在实例的引用
$.jstree.reference('jstree');
$.jstree.reference('#jstree');
$.jstree.reference($('#jstree'));
$.jstree.reference(document.getElementByID('jstree'));

3、获取一个已存在的节点
$('#jstree').jstree("get_node", "child_node_1");

4、当根节点（root）第一次加载时触发
$('#jstree').jstree().bind('loaded.jstree', function(e, data) {//加载事件
data.instance.open_all();
data.instance.refresh();
});

5、当所有节点都加载完毕时触发
$('#jstree').jstree().bind('ready.jstree', function(obj, e) {//初始化准备完成事件
$('#jstree').jstree(true).select_node('child_node_1');
});

6、选中事件
$('#jstree').jstree().on('select_node.jstree', function(e, data) {//选中事件
console.log("1~" + data.node.id + ":" + data.node.text);
});

7、改变事件
$('#jstree').jstree().on("changed.jstree",function(e, data) {//改变事件
console.log("2~" + "The selected nodes are:" + data.selected[0]);
});

8、点击事件
$('#jstree').jstree().on('activate_node.jstree', function(e, data) {//点击事件
console.log("3~" + data.node.id + ":" + data.node.text);
})

绑定的json属性列表
{
　　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
}

实例如下

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jstree basic demos</title>

	<script src="jstreeGroup/jquery-3.3.1.js"></script>

	<link rel="stylesheet"

	href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />

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

</head>

<body>

	<div id="jstree">

		<!-- in this example the tree is populated from inline HTML -->

		<ul>

			<li id="node1">Root node 1

				<ul>

					<li id="child_node_1">Child node 1</li>

					<li id="child_node_2">Child node 2</li>

				</ul>

			</li>

			<li id="node2">Root node 2</li>

		</ul>

	</div>

	<script>

		$(function() {

			/**

			$('#jstree').jstree().on('select_node.jstree', function(e, data) {//选中事件

			console.log("1~" + data.node.id + ":" + data.node.text);

			}).on(

			"changed.jstree",

			function(e, data) {//改变事件

			console.log("2~" + "The selected nodes are:"

			+ data.selected[0]);

			}).on('activate_node.jstree', function(e, data) {//点击事件

			console.log("3~" + data.node.id + ":" + data.node.text);

			}).bind('loaded.jstree', function(e, data) {//加载事件

			data.instance.open_all();

			data.instance.refresh();

			});

			**/

			$('#jstree').jstree({

				'core' : {

					'data' : [ {

						"id" : "node1",

						"text" : "Root node 1",

						"children" : [ {

							"id" : "child_node_1",

							"text" : "Child node 1",

							"selected" : true

						}, {

							"id" : "child_node_2",

							"text" : "Child node 2"

						} ]

					}, {

						"id" : "node2",

						"text" : "Root node 2"

					} ]

				}

			}).on('select_node.jstree', function(e, data) {//选中事件

				console.log("1~" + data.node.id + ":" + data.node.text);

			}).on("changed.jstree",function(e, data) {//改变事件

				console.log("2~" + "The selected nodes are:" + data.selected[0]);

			}).on('activate_node.jstree', function(e, data) {//点击事件

				console.log("3~" + data.node.id + ":" + data.node.text);

			}).bind('loaded.jstree', function(e, data) {//加载事件

				data.instance.open_all();

				data.instance.refresh();

			}).bind('ready.jstree', function(obj, e) {//初始化准备完成事件

				$('#jstree').jstree(true).select_node('child_node_1');

				//$('#jstree').jstree('select_node', 'child_node_2');

				//$.jstree.reference('#jstree').select_node('child_node_1');

				/**

				//获取一个已存在实例的引用

				$.jstree.reference('jstree');

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

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

				$.jstree.reference(document.getElementByID('jstree'));

				**/

				/**

				var node = $('#jstree').jstree("get_node", "child_node_1");//根据 ID 获取节点

				console.log(node.text);

				**/

			});

		});

	</script>

</body>

</html>

　　

js-jsTree的更多相关文章

  1. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  2. JsTree

    一.JStree的简单介绍 1.关于jstree jsTree 使用了 jQuery 和 Sarissa,是一个是免费的但是设置灵活的,基于 JavaScript 跨浏览器支持的网页树形部件. jsT ...

  3. 树组件——jstree使用

    本文记录的只是我自己当时的代码,每行的注释很清楚了,你自己可以做相应变通 一.使用前提: 1.下载jstree依赖包 2.相关页面引入样式["jstree/themes/default/st ...

  4. Magicodes.Admin.Core开源框架总体介绍

    框架说明 Magicodes.Admin.Core框架在ABP以及ASP.NET ZERO的基础上进行了封装和完善,目前基于.NET Core 2.0+(Framework版本),由于部分组件在.NE ...

  5. tsort - 拓扑排序

    tsort - 拓扑排序 本文链接:http://codingstandards.iteye.com/blog/834572   (转载请注明出处) 用途说明 tsort命令通常用于解决一种逻辑问题, ...

  6. JQuery/JS插件 jsTree加载树，普通加载，点一级加载一级

    前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  7. JQuery/JS插件 jsTree加载树，预先加载，初始化时加载前三级节点，当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  8. [原] JsTree.js

    写自用软件系统时查找到的树列表控件过于庸余,样式难调,故自写一套完整的简易js_TreeTable控件,使用时简单的添加自定义的样式效果即可,特此发布第一个版本. 源码如下: /* * Huashan ...

  9. jsTree简单应用Demo

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

随机推荐

  1. BZOJ5206 [Jsoi2017]原力[根号分治]

    这是一个三元环计数的裸题,只是多了一个颜色的区分和权值的计算罢了. 有一种根号分治的做法(by gxz) 这种复杂度的证明特别显然,思路非常简单,不过带一个log,可以用unordered_map或者 ...

  2. 【转】认证 (authentication) 和授权 (authorization) 的区别

    以前一直分不清 authentication 和 authorization,其实很简单,举个例子来说: 你要登机,你需要出示你的身份证和机票,身份证是为了证明你张三确实是你张三,这就是 authen ...

  3. SSH登录卡顿解决方案

    在使用ssh远程登录Linux主机时,经常出现需要等待一段时间才能登录,甚至登录超时的情况 原因一:SSH服务器默认开启了DNS的查询功能:UseDNS=yes 当UseDNS选项处于开启状态时,客户 ...

  4. 在Google Maps 上点击标签显示说明并保持不消失

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

  5. Java xml和map,list格式的转换-摘抄

    import java.io.ByteArrayOutputStream; import java.util.ArrayList; import java.util.HashMap; import j ...

  6. C++全局变量的定义和声明

    编译单元 编译分为两个步骤: 第一步:将每个.cpp或.c和相应的.h文件编译乘obj文件(包含预编译,汇编.编译) 第二部:将obj文件进行Link,生成最终的可执行文件 根据该阶段错误大致可分为两 ...

  7. 【CUDA 基础】4.5 使用统一内存的向量加法

    title: [CUDA 基础]4.5 使用统一内存的向量加法 categories: - CUDA - Freshman tags: - 统一内存 - Uniform Memory toc: tru ...

  8. Solr6.0环境搭建

    感谢TTTTTTTTT丶的分享. 转载地址: 点击打开链接 准备工作: 目前最新版本6.0.下载solr 6.0:Solr6.0下载 JDK8 下载jdk1.8:jdk1.8[solr6.0是基于jd ...

  9. 【记录】springboot项目的maven的pom.xml文件第一行报错 Unknown Error

    原因 : maven的插件版本的问题,造成与IDE的不兼容 解决办法 :在pom中加上 <maven-jar-plugin.version>3.1.1</maven-jar-plug ...

  10. selenium的方法

    # Licensed to the Software Freedom Conservancy (SFC) under one # or more contributor license agreeme ...