json动态生成树形菜单

JSON动态生成树形菜单基础概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。树形菜单是一种常见的用户界面元素，用于展示层次结构的数据。通过JSON动态生成树形菜单，可以将数据结构化地展示给用户。

优势

灵活性：JSON格式灵活，可以轻松表示复杂的层次结构。
可读性：JSON数据易于理解和维护。
跨平台：JSON数据可以在不同的编程语言和平台之间无缝传输和处理。
性能：相对于XML等其他格式，JSON更轻量，解析速度更快。

类型

树形菜单可以根据具体需求有不同的类型，如：

静态树形菜单：预先定义好的菜单结构。
动态树形菜单：根据后端返回的JSON数据实时生成的菜单。

应用场景

网站导航：展示网站的层级结构。
文件管理器：展示文件和文件夹的层次关系。
组织架构图：展示公司或团队的组织结构。

示例代码

以下是一个简单的JavaScript示例，展示如何使用JSON数据动态生成树形菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree Menu Example</title>
    <style>
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        .node {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="treeMenu"></div>

    <script>
        const jsonData = [
            {
                "name": "Root",
                "children": [
                    {
                        "name": "Node 1",
                        "children": [
                            {"name": "Leaf 1.1"},
                            {"name": "Leaf 1.2"}
                        ]
                    },
                    {
                        "name": "Node 2",
                        "children": [
                            {"name": "Leaf 2.1"},
                            {"name": "Leaf 2.2"}
                        ]
                    }
                ]
            }
        ];

        function createTree(data, parentElement) {
            const ul = document.createElement('ul');
            data.forEach(item => {
                const li = document.createElement('li');
                li.className = 'node';
                li.textContent = item.name;
                if (item.children && item.children.length > 0) {
                    createTree(item.children, li);
                }
                ul.appendChild(li);
            });
            parentElement.appendChild(ul);
        }

        const treeMenuDiv = document.getElementById('treeMenu');
        createTree(jsonData, treeMenuDiv);
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：树形菜单展开和折叠功能失效

原因：可能是事件绑定或递归逻辑出现问题。

解决方法：

function createTree(data, parentElement) {
    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        li.className = 'node';
        li.textContent = item.name;
        li.addEventListener('click', (event) => {
            event.stopPropagation();
            const childUl = li.querySelector('ul');
            if (childUl) {
                childUl.style.display = childUl.style.display === 'none' ? '' : 'none';
            }
        });
        if (item.children && item.children.length > 0) {
            createTree(item.children, li);
        }
        ul.appendChild(li);
    });
    parentElement.appendChild(ul);
}