依赖：
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>