JsTree最详细教程及完整实例
JsTree 最详细教程及完整实例
JsTree是⼀个jquery的插件，它提交⼀个⾮常友好并且强⼤的交互性的树，并且是完全免费或开源的（MIT 许可）。Jstree技持Html 或 json格式的的数据， 或者是ajax⽅式的动态请求加载数据。
1、⽀持基于HTML定义、Json、XML⽅式加载树节点
2、⽀持拖放，动态增加、删除、重命名树节点
3、⽀持复选框
4、⽀持复制、剪切、粘贴树节点，动态刷新树
5、提供⾜够的回调⽅法：
6、此外，jsTree有极强的扩展性，可以⾃定义插件⽀持更⼴泛的应⽤
⼀.Getting started
1.1 下载j s tr e e
从官⽹下载最新的版本，⽬前最新的版本为3.3.3，下载完成后，打开压缩包，将dist/下所有⽂件复制到你想到使⽤的地⽅
1.2 引⽤j s tr e e及j q ue r y
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 使⽤j s on格式构建j s tr e e
使⽤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、de 取相应的参数。
以下是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请参考
2.3j s tr e e 插件
jstree⾮常灵活，允许⽤户⾃⼰⾃定义插件的⽅式扩展想要的功能，当然本⾝已提供了很多插件，基本覆盖了业务中常⽤的功能。更多插件请参考
插件的启⽤⽅式：
"plugins" : [ "checkbox", "contextmenu", "dnd", "massload", "search", "sort", "state", "types", "unique", "wholerow", "changed", "conditionalselect" ]完整代码如：
$('#jstree1').jstree({
"plugins" : [ "wholerow","themes"]
});
2.4扩展conte x tm e nu插件
⾃定义右键菜单需求：在⿏标经过节点时，在右侧显⽰⼀个下拉的箭头，当点击下拉箭头时可以弹出右键菜单，当然直接在节点上右键也是可以弹出菜单
的。这个效果类似于 企业号中通讯录的功能。
这个需求需要扩展jstree中⾃带的contextmenu插件才可以实现，最简单的⽅式就是直接把jstree⾥的contextmenu复制⼀份，在这个基础上改，另外也
需要改右键菜单的样式。
完整代码请下载附件
2.5常⽤的j s tr e e操作
常⽤的操作有创建节点、删除、重命名、上移、下移等。
<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","te      "themes" : {
"variant" : "large",//加⼤
"ellipsis" : true //⽂字多时省略
},
"check_callback" : true
},
"plugins" : [ "wholerow","themes"]
}).on('select_node.jstree', function(event, data) {
console.de);
}).on('changed.jstree', function(event,data) {
console.log("-----------changed.jstree");
console.log("action:" + data.action);
console.de);
});
});
function create(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
currNode = ate_node(currNode, {"type":"file"});
if(currNode) {
ref.edit(currNode);
}
}
function rename(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
jquery在线教程交流ame_node(currNode,"rename node222");
}
function del(){
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 = _prev_dom(currNode,true);
}
function movedown(){
var ref = $('#jstree1').jstree(true);
var currNode = _getCurrNode();
var nextNode = _next_dom(currNode,true);//返回兄弟节点的下⼀个节点  ve_node(currNode,nextNode,'after');
}
/**
* 获取当前所选中的结点
*/
function _getCurrNode(){
var ref = $('#jstree1').jstree(true),
sel = _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" οnclick="create();">
<input type="button" value="rename node" οnclick="rename();">
<input type="button" value="del node" οnclick="del();">
<input type="button" value="上移" οnclick="moveup();">
<input type="button" value="下移" οnclick="movedown();">
<div id="jstree1" ></div>
</body>
</html>