jQuery Treeview 学习笔记
什么是 jQuery Treeview
jQuery Treeview 是一款基于 jQuery 的树形结构插件，可以将数据以树形结构的形式展示在页面上，方便用户进行查看和操作。
该插件支持多种数据格式，包括 JSON、HTML 和 XML 等。同时，也支持多种交互功能，如展开和折叠节点、拖拽节点等。
如何使用 jQuery Treeview
引用 jQuery 和 Treeview 插件
在使用 jQuery Treeview 之前，需要先在页面中引用 jQuery 和 Treeview 插件的 js 和 css 文件。
htmlCopy Code<!-- 引用 jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 引用 Treeview 插件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdn.staticfile.org/jstree/3.2.1/jstree.min.js"></script>
创建树形结构
在页面中创建一个容器，用于展示树形结构。然后，通过 JavaScript 代码初始化 Treeview，并将数据渲染到容器中。
htmlCopy Code<div id="tree"></div>
<script>
// 初始化 Treeview
$('#tree').jstree({
'core': {
'data': [
{
"text": "Node 1",
"children": [
{ "text": "Child 1" },
"Child 2"
]
},
"Node 2"
]
}
});
</script>
上面的代码将会创建一个树形结构，包含两个节点：Node 1 和 Node 2。其中，Node 1 下面包含两个子节点：Child 1 和 Child 2。
样式定制
通过修改插件的样式文件，可以改变树形结构的外观和交互方式。例如，可以修改节点的背景色、文字颜色等。
cssCopy Code/* 修改节点的背景色为灰色 */
.jstree-default .jstree-node {
background-color: #f2f2f2;
}
/* 修改节点的文字颜色为黑色 */
.jstree-default .jstree-anchor {
color: black;
}
示例
以下是一个完整的示例，展示了如何使用 jQuery Treeview 创建一个简单的树形结构，并实现拖拽节点的功能。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Treeview 示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/jstree/3.2.1/themes/default/style.min.css" />
<style type="text/css">
/* 修改节点的背景色为灰色 */
.jstree-default .jstree-node {
background-color: #f2f2f2;
}
/* 修改节点的文字颜色为黑色 */
.jstree-default .jstree-anchor {
color: black;
}
</style>
</head>
<body>
<h1>jQuery Treeview 示例</h1>
<div id="tree"></div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
// 初始化 Treeview
$('#tree').jstree({
'core': {
'data': [
{
"text": "Node 1",
"children": [
{ "text": "Child 1" },
"Child 2"
]
},
"Node 2"
]
},
"plugins": ["dnd"] // 添加插件，启用拖拽功能
});
});
</script>
</body>
</html>
在上面的示例中，我们通过添加 "plugins": ["dnd"] ，启用了插件的拖拽功能，用户可以通过鼠标拖拽节点，改变树形结构的层级。