依赖：
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. Circular view path [mydemo]: would dispatch back to the current handler URL [/mydemo] again. Check your ViewResolver setup!

    简单创建一个springboot工程 pom.xml <?xml version="1.0" encoding="UTF-8"?><proje ...

  2. Linux（Ubuntu）安装ssh服务

    在终端(Ctrl + Alt + T )输入 $ps -e | grep ssh 看到 “ ssh-agent ” 和 “sshd” ,表示没有安装服务,或没有开机启动 1.安装SSH 输入:sudo ...

  3. Series拼接回DataFrame

    从这样的表,如何计算一行汇总层拼接回去

  4. 题解 [BZOJ1832][AHOI2008] 聚会

    题面 解析 首先对于其中的两个点\(x,y\)最近的点显然就是他们的\(lca\)(我们把它设为\(p1\)), 然后考虑第三个点\(z\)与\(p1\)的\(lca,p2\). 有以下几种情况: \ ...

  5. javascript内置对象一： Array数组

    在JavaScript中的任何事物,字符串,数组,函数等等都是对象. 理解:浏览器自己封装好的对象,可以直接使用. push   /pʊʃ/  增加 在末尾增加              unshif ...

  6. Java 显示调用隐式调用

    当你没有使用父类默认的构造方法时,此时在子类的构造方法中就需要显示的调用父类定义的构造方法.比如:父类:class Animal{ private String name; //如果你定义一个新的构造 ...

  7. tensorflow实现siamese网络 (附代码)

    转载自:https://blog.csdn.net/qq1483661204/article/details/79039702 Learning a Similarity Metric Discrim ...

  8. Zabbix 数据库迁移

    背景:ZABBIX的环境是LNMP,MySQL的架构是M-M主备模式,单台服务器SSD硬盘800G.监控主机日渐增多,空间不足,迁移到同样架构下的SAS盘2T空间. 架构:A 192.168.0.10 ...

  9. quartz.net 执行后台任务

    ... https://www.cnblogs.com/zhangweizhong/category/771057.html https://www.cnblogs.com/lanxiaoke/cat ...

  10. Python面试题:使用栈处理括号匹配问题

    括号匹配是栈应用的一个经典问题, 题目 判断一个文本中的括号是否闭合, 如: text = "({[({{abc}})][{1}]})2([]){({[]})}[]", 判断所有括 ...