一、什么是jstree
jstree是一个基于jQuery的、轻量级的、可定制的、实用的树结构插件，支持多种数据源和多种节点类型。它可以帮助开发人员快速创建各种功能强大的树结构。
二、如何使用jstree
1、在HTML文件中添加引用jQuery和jstree的js和css文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstree Demo</title>
<!-- 引入 jQuery 的js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入 jstree 的js、css文件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
</body>
</html>2、在<body>标签中添加一个用于显示jstree的HTML元素：
<div id="tree"></div>3、通过jQuery的语法进行初始化和配置：
$(function () {
$('#tree').jstree();
});三、如何加载数据源
1、在初始化的过程中可以通过对tree的配置项进行设置来加载数据源，例如：
$(function () {
$('#tree').jstree({
'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
}
});
});2、也可以通过ajax来加载数据源，例如：
$(function () {
$('#tree').jstree({
'core' : {
'data' : {
'url' : 'ajax_data.json',
'dataType' : 'json'
}
}
});
});四、如何处理事件
在jstree中，可以处理多种事件，例如，常见的click、dblclick、changed、select_node等事件。例如：
$(function () {
$('#tree').jstree({
'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
}
})
.on('changed.jstree', function (e, data) {
console.log(data.selected);
});
});五、如何自定义节点类型
在jstree中，可以通过自定义节点类型的方式，来实现根据不同的节点类型来使用不同的样式和行为。例如，可以通过以下方式添加一个“文件”节点类型，并进行自定义：
$(function () {
$.jstree.defaults.types["file"] = {
'icon' : 'glyphicon glyphicon-file',
'max_children' : 0,
'max_depth' : 1,
'valid_children' : []
};
$('#tree').jstree({
'core' : {
'data' : [
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1', 'type': 'file' },
{ 'text' : 'Child 2' }
]
}
]
}
});
});六、如何控制节点
在jstree中，可以对节点的行为和属性进行控制。例如，在以下的示例中，通过控制节点，仅允许“文件”类型的节点进行拖拽和重命名：
$(function () {
$.jstree.defaults.types["file"] = {
'icon' : 'glyphicon glyphicon-file',
'max_children' : 0,
'max_depth' : 1,
'valid_children' : []
};
$('#tree').jstree({
'core' : {
'data' : [
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1', 'type': 'file' },
{ 'text' : 'Child 2' }
]
}
]
},
'types' : {
"file" : {
"valid_children" : [ ]
}
},
'plugins' : ['types','dnd','contextmenu']
});
});七、如何使用插件
jstree提供了各种各样的插件，可以帮助我们实现更复杂的功能，例如，contextmenu、dnd、checkbox等插件。下面以checkbox插件为例：
$(function () {
$.jstree.defaults.types["file"] = {
'icon' : 'glyphicon glyphicon-file',
'max_children' : 0,
'max_depth' : 1,
'valid_children' : []
};
$('#tree').jstree({
'core' : {
'data' : [
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1', 'type': 'file' },
{ 'text' : 'Child 2' }
]
}
]
},
'types' : {
"file" : {
"valid_children" : [ ]
}
},
'checkbox' : {
'tie_selection' : false
},
'plugins' : ['types','dnd','contextmenu', 'checkbox']
});
});
