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>