JsTree 最详细教程及完整实例 -

yiding_123

浏览: 40183 次
性别:
来自: 上海

最近访客更多访客>>

cgrregedit

jxjxtang

cuvier

richo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JsTree 最详细教程及完整实例

博客分类：

jstree

JsTree 最详细教程及完整实例

JsTree是一个jquery的插件，它提交一个非常友好并且强大的交互性的树，并且是完全免费或开源的（MIT 许可）。Jstree技持Html 或 json格式的的数据， 或者是ajax方式的动态请求加载数据。

1、支持基于HTML定义、Json、XML方式加载树节点

    2、支持拖放，动态增加、删除、重命名树节点

    3、支持复选框

    4、支持复制、剪切、粘贴树节点，动态刷新树

    5、提供足够的回调方法：

    6、此外，jsTree有极强的扩展性，可以自定义插件支持更广泛的应用

一.Getting started

1.1 下载jstree

从官网下载最新的版本，目前最新的版本为3.3.3，下载完成后，打开压缩包，将dist/下所有文件复制到你想到使用的地方

https://github.com/vakata/jstree/zipball/3.3.3

1.2 引用jstree及jquery

jstree是jquery的一个插件，所以首先要引用jquery

<script src="jquery.min.js"></script>

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

<link rel="stylesheet" href="dist/themes/default/style.min.css" />

1.3 在页面中定义jstree的容器，可以使用div定义

 <div id="jstree_demo_div"></div>

1.4 在页面加载后好，可以初始化jstree

Once the DOM is ready you can start creating jstree instances.

$(function () { $('#jstree_demo_div').jstree(); });

二、JsTree常用的配置及操作

jstree可以在初始化时接收一些配置，以达到我们业务上想用的效果，例如如下配置：

2.1 使用json格式构建jstree

使用json构建jstree里，一种可以使用ajax请求的方式构建, 一种可以使用有父子嵌套关系的json格式的数据构建， 另外一种可以使用非嵌套关系的json格式数据构建(我认为这种最方便)

如果你不想使用嵌套父子关系的json ,你可以使用这种非嵌套方式的， 每个node只有两个属性是必需的: id 和parent, 其他都是可选的，不需要 children属性，jstree会自动构建层级关系。 可以将node的parent属性设置为"#",表示为一个root节点。

这种方式非常适用于从数据库中加载出来的数据，可以非常方便的构建整个树。

 

示例代码：

$('#using_json_2').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] } });

2.2 绑定事件

可以使用jquery方式绑定 jstree支持的事件，这里抱怨下，jstree的api文档写的并不好，有时得需要翻源代码才可以知道用法。

比如上图这个changed.jstree事件， 这个是官网提供的api,从这个api上看，我还以为是这个event会有4个回调参数，其实并不是，翻看了原代码后才知道，只有2个参数event和data。可以通过data.action、data.selected、data.node 取相应的参数。

以下是jstree源码中的触发这个changed事件的方法。

绑定事件的方式：

$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected); });

常用事件：

事件	作用	应用场景
select_node.jstree	当一个node被选用时触发	当点击某个节点时执行一个动作。在网上搜索，很多资料写的是绑定click.jstree,其实在官网的api里，click.jstree并没有支持，这里应该使用select_node.jstree
changed.jstree	当selection changes时，或者删除节点、	可以监听jstree的改变，例如jstree改变时可以同步更新数据库中的节点情况
create_node.jstree	当节点被创建时触发
delete_node.jstree	当节点被删除时触发
rename_node.jstree	当一个node被重命名时触发

更多api请参考https://www.jstree.com/api/

2.3jstree插件

jstree非常灵活，允许用户自己自定义插件的方式扩展想要的功能，当然本身已提供了很多插件，基本覆盖了业务中常用的功能。更多插件请参考https://www.jstree.com/plugins/

插件的启用方式：

"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]

完整代码如：

$('#jstree1').jstree({

"plugins" : [ "wholerow","themes"]

});

2.4扩展contextmenu插件

自定义右键菜单需求：在鼠标经过节点时，在右侧显示一个下拉的箭头，当点击下拉箭头时可以弹出右键菜单，当然直接在节点上右键也是可以弹出菜单的。这个效果类似于微信企业号中通讯录的功能。

这个需求需要扩展jstree中自带的contextmenu插件才可以实现，最简单的方式就是直接把jstree里的contextmenu复制一份，在这个基础上改，另外也需要改右键菜单的样式。

完整代码请下载附件

2.5常用的jstree操作

常用的操作有创建节点、删除、重命名、上移、下移等。

<html>
<head>
	<link rel="stylesheet" href="jstree/themes/default/style.min.css" />
	<script type="application/javascript" src="jquery-2.1.1.min.js"></script>
	<script type="application/javascript" src="jstree/jstree.js"></script>
	<script>
	$(function() {
		
		  $('#jstree1').jstree({
				"core":{
					"data":[{"id":"0","parent":"#","state":{"disabled":false,"opened":true,"selected":false},"text":"夏宇信息"},{"id":"69","parent":"0","text":"工程"},{"id":"5","parent":"0","text":"行政"},{"id":"71","parent":"0","text":"迷"},{"id":"1","parent":"0","text":"技术"}],
					"themes" : {
						"variant" : "large",//加大
						"ellipsis" : true //文字多时省略
					},
					"check_callback" : true
				},
				"plugins" : [ "wholerow","themes"]
			}).on('select_node.jstree', function(event, data) {
				console.log(data.node);
			}).on('changed.jstree', function(event,data) {
				console.log("-----------changed.jstree");
				console.log("action:" + data.action);
				console.log(data.node);
			});
				  
	  });
  
	
	function create(){
		var ref = $('#jstree1').jstree(true);
		var currNode = _getCurrNode();
		currNode = ref.create_node(currNode, {"type":"file"});
		if(currNode) {
			ref.edit(currNode);
		}
	}
		
	function rename(){
		var ref = $('#jstree1').jstree(true);
		var currNode = _getCurrNode();
		ref.rename_node(currNode,"rename node222");
	}
	
	function del(){
		var ref = $('#jstree1').jstree(true);
		var currNode = _getCurrNode();
		ref.delete_node(currNode);
	}
	
	function moveup(){
		var ref = $('#jstree1').jstree(true);
		var currNode = _getCurrNode();
		var prevNode = ref.get_prev_dom(currNode,true);
		ref.move_node(currNode,prevNode,'before');
	}
	
	function movedown(){
		var ref = $('#jstree1').jstree(true);
		var currNode = _getCurrNode();
		var nextNode = ref.get_next_dom(currNode,true);//返回兄弟节点的下一个节点
		ref.move_node(currNode,nextNode,'after');
	}
	
	/**
	*	获取当前所选中的结点
	*/
	function _getCurrNode(){
		var ref = $('#jstree1').jstree(true),
		sel = ref.get_selected();
		console.log(sel);
		if(!sel.length) { 
			console.log("----");
			return false; 
		}
		sel = sel[0];
		return sel;
	}
</script>
</head>
<body>
<input type="button" value="create node" onclick="create();">
<input type="button" value="rename node" onclick="rename();">
<input type="button" value="del node" onclick="del();">
<input type="button" value="上移" onclick="moveup();">
<input type="button" value="下移" onclick="movedown();">
<div id="jstree1" style="width:200px;background:#fff322"></div>
</body>
</html>