The most detailed tutorial and complete example of JsTree
JsTree is a jquery plugin that submits a very friendly and powerful interactive tree, and is completely free or open source (MIT license). Jstree technology supports data in Html or json format, or dynamic request loading data in ajax mode.
1. Support loading tree nodes based on HTML definition, Json, XML
2. Support drag and drop, dynamically add, delete and rename tree nodes
3. Support checkbox
4. Support copying, cutting, and pasting tree nodes, and refresh the tree dynamically
5. Provide enough callback methods:
6. In addition, jsTree is highly extensible, and you can customize plug-ins to support a wider range of applications
一.Getting started
1.1 Download jstree
Download the latest version from the official website. The latest version is 3.3.3. After the download is complete, open the compressed package and copy all the files under dist/ to the place you want to use.
1.2 Reference jstree and jquery
jstree is a plugin of jquery, so first refer to 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 Define the container of jstree in the page, you can use div definition
<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>