1. 引入 jQuery 和 jstree 插件：
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
2. HTML 结构：
在需要显示 Treeview 的容器元素上添加相应的 ID。
<div id="treeview"></div>
3. 初始化 jstree 插件：
在页面加载完成后，使用 jQuery 选择器选中容器元素，并调用 jstree() 方法。
$(document).ready(function(){
$('#treeview').jstree({
'core' : {
'data' : [
{
"text" : "Parent Node",
"children" : [
{ "text" : "Child Node 1" },
{ "text" : "Child Node 2" }
]
}
]
}
});
});
在这个例子中，'core': {'data': [...]} 定义了树形结构的数据。
4. 事件处理：
jstree 允许您监听各种事件，例如选择节点、展开节点等。以下是一个监听节点选择事件的例子：
$(document).ready(function(){
$('#treeview').jstree({
'core': {
'data': [
{
"text": "Parent Node",
"children": [
{"text": "Child Node 1"},
{"text": "Child Node 2"}
]
}
]
}
}).on('select_node.jstree', function (e, data) {
alert('Node selected: ' + data.node.text);
});
});
在这个例子中，on('select_node.jstree', function (e, data) {...} 定义了选中节点时的事件处理函数。
jstree 提供了许多配置选项和事件，以及支持 AJAX 加载数据等高级功能。您可以根据需要查阅 [jstree 文档](https://www.jstree.com/docs/) 以了解更多选项和功能。
转载请注明出处：http://www.zyzy.cn/article/detail/12912/jQuery