依赖：
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. MyBatis-09-Lombok

    9.Lombok Project Lombok is a java library that automatically plugs into your editor and build tools, ...

  2. win10 LTSC 2019 激活

    win 10 打开终端 1.slmgr -ipk M7XTQ-FN8P6-TTKYV-9D4CC-J462D 2.slmgr -skms kms.03k.org 3.slmgr -ato 4. slm ...

  3. BZOJ 1453 （线段树+并查集）

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1453 题意:一个 n*n 的矩阵,每个位置有黑/白两种颜色,有 m 次操作,每次可以翻转 ...

  4. Java中的集合Collection、Iterator和Foreach用法(一)

    1.Java集合概述 在编程中,常常需要集中存放多个数据.当然我们可以使用数组来保存多个对象.但数组长度不可变化,一旦在初始化时指定了数组长度,则这个数组长度是不可变的,如果需要保存个数变化的数据,数 ...

  5. vscode调整字体大小

    在vscode中,通过setting>User>Text Editor>Font可以调整字体大小,但是这里只是调整右侧的代码编辑区域的字体,左侧的侧边栏确无法调整字体大小,找了很久都 ...

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

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

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

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

  8. HGOI 20191101am 题解

    Problem A awesome 给出一个序列$A_i$,任取序列中三个数组成三元组$(a_i , a_j , a_k)$. 输出本质不同的且$abc \equiv 1 (mod  P)$且满足$a ...

  9. POJ3764

    题目 POJ3764 The xor-longest Path 原题传送门 主要思路: 1.求出每个点到根节点(这里是树,所以直接取0)路径上所有权值xor和为d[i],则任意两点间路径xor和则为 ...

  10. Tomcat7修改根路径应用

    大家想必遇到过这样的问题,同台机器上跑上多个tomcat 那么随之更改文件的工作量就会增加 今天突然想到把所有的tomcat的根目录更改成一个文件 但是有不好的就的地方就是在更改文件的时候需要把这台机 ...