jquery 添加树形

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。树形结构通常用于表示具有层次关系的数据，如文件系统、组织结构等。

类型

jQuery 树形结构通常通过插件实现，常见的插件有：

jsTree：一个功能强大的树形控件，支持节点的拖放、编辑、展开/折叠等功能。
jQuery UI Tree：基于 jQuery UI 的树形控件，提供了丰富的交互功能。
Dynatree：一个轻量级的树形控件，支持懒加载和节点状态的持久化。

应用场景

文件管理系统：展示文件和文件夹的层次结构。
组织结构图：展示公司或组织的层级关系。
分类导航：展示商品或内容的分类结构。

示例代码

以下是一个使用 jsTree 插件实现树形结构的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Tree Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>
</head>
<body>
    <div id="tree"></div>

    <script>
        $(function() {
            $('#tree').jstree({
                'core': {
                    'data': [
                        { "id": "ajson1", "parent": "#", "text": "Root node" },
                        { "id": "ajson2", "parent": "#", "text": "Child node 1" },
                        { "id": "ajson3", "parent": "ajson1", "text": "Child node 2" }
                    ]
                }
            });
        });
    </script>
</body>
</html>