依赖：
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. mpvue打小程序预览码

    喂,快给我打一个小程序预览码 前端大全 昨天 (点击上方公众号,可快速关注) 来源:写Bug segmentfault.com/a/1190000015336845 需求 开发小程序的朋友们随时都会听 ...

  2. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

  3. DTcmsV4.0分析学习——(3)URL重写

    3.URL重写 3.1 控制流程 通过IHttpModule控制所有页面请求,具体流程如下 (1)真实路径可正常访问 (2)前台页面通过URL重写映射aspx目录,后台页面通过URL重写映射admin ...

  4. Codeforces Round #588 (Div. 2) A. Dawid and Bags of Candies

    链接: https://codeforces.com/contest/1230/problem/A 题意: Dawid has four bags of candies. The i-th of th ...

  5. Python IDE Ⅱ

    3.设置Pydev 安装完成后,还需要设置一下PyDev,选择Window -> Preferences来设置PyDev.设置Python的路径,从Pydev的Interpreter - Pyt ...

  6. 面试必会之ArrayList源码分析&手写ArrayList

    简介 ArrayList是我们开发中非常常用的数据存储容器之一,其底层是数组实现的,我们可以在集合中存储任意类型的数据,ArrayList是线程不安全的,非常适合用于对元素进行查找,效率非常高. 线程 ...

  7. mybatis标签selectkey无法返回主键值

  8. Spring@PostConstruct和@PreDestroy注解详解

    @PostConstruct注解使用 @PostConstructApi使用说明 The PostConstruct annotation is used on a method that needs ...

  9. vue上传大文件的解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  10. Depth from Videos in the Wild 解读

    2019年7月17日11:37:05 论文 Depth from Videos in the Wild: Unsupervised Monocular Depth Learning from Unkn ...