依赖：
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. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

  2. java实现简单的单点登录 （转）

    摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现手段,并且给出Web-SSO ...

  3. hybird(h5)页面自动化测试

  4. Luogu P2146 [NOI2015]软件包管理器 树剖

    卸载:把子树清空: 安装:把自己到$1$的链改为$1$ #include<cstdio> #include<iostream> #include<cstring> ...

  5. openSmile-2.3.0在Linux下安装

    我这边官网下载的特别慢,提供一下云盘下载安装包: 链接:http://pan.baidu.com/s/1sl2YGbz 密码:p1vj windows下的我也下载了 链接:http://pan.bai ...

  6. xgboost 特征重要性计算

    在XGBoost中提供了三种特征重要性的计算方法: ‘weight’ - the number of times a feature is used to split the data across ...

  7. html页面之间相互传值

    常见的在页面登录过后会获得一个token值然后页面跳转时传给下一个页面 sessionStorage.setItem("token",result.token);//传输token ...

  8. HDU6513/CCPC2017--A Secret（KMP）

    A Secret Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Others)Total ...

  9. Leetcode题目53.最大子序和（动态规划-简单）

    题目描述: 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4],输出: 6解释: 连 ...

  10. 怎样用linux命令知道系统是ubuntu还是redhat或者其它的系统？

    1.第一种方法:# lsb_release -aLSB Version:    :core-4.0-ia32:core-4.0-noarch:graphics-4.0-ia32:graphics-4. ...