无限层级目录树

777nx

发布于 2023-10-18 15:14:12

1460

发布于 2023-10-18 15:14:12

文章被收录于专栏：Fantasy的技术小站Fantasy的技术小站

题目

实现一个无限层级的目录树UI，要求不仅限于可对任意项进行勾选，且能实时获取到树的选择值。不限技术栈，但是不允许使用或复制（代码）任何第三方组件或UI库。你可以寻求一切你能寻求的帮助（开卷考）。

答案

实现一个无限层级的目录树UI并实现勾选功能，并能实时获取选择值是一个相对复杂的任务，需要使用HTML、CSS和JavaScript来完成。以下是一个简单的示例，你可以根据需要进行扩展和改进：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限层级目录树</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="tree"></div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

.tree-item {
    margin-left: 20px;
}

.checkbox {
    margin-right: 10px;
}

JavaScript (script.js):

const treeData = [
    {
        label: 'Item 1',
        children: [
            {
                label: 'Item 1.1',
                children: [
                    {
                        label: 'Item 1.1.1',
                        children: []
                    },
                    {
                        label: 'Item 1.1.2',
                        children: []
                    }
                ]
            },
            {
                label: 'Item 1.2',
                children: []
            }
        ]
    },
    {
        label: 'Item 2',
        children: [
            {
                label: 'Item 2.1',
                children: []
            }
        ]
    }
];

function createTreeItem(item) {
    const treeItem = document.createElement('div');
    treeItem.classList.add('tree-item');

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.classList.add('checkbox');
    treeItem.appendChild(checkbox);

    const label = document.createElement('label');
    label.textContent = item.label;
    treeItem.appendChild(label);

    checkbox.addEventListener('change', () => {
        updateSelectedValues();
    });

    if (item.children && item.children.length > 0) {
        const childrenContainer = document.createElement('div');
        item.children.forEach(child => {
            childrenContainer.appendChild(createTreeItem(child));
        });
        treeItem.appendChild(childrenContainer);
    }

    return treeItem;
}

function updateSelectedValues() {
    const selectedValues = [];
    const checkboxes = document.querySelectorAll('.checkbox');
    checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
            selectedValues.push(checkbox.nextSibling.textContent);
        }
    });

    console.log('Selected Values:', selectedValues);
}

const treeContainer = document.getElementById('tree');
treeData.forEach(item => {
    treeContainer.appendChild(createTreeItem(item));
});

这个示例使用了HTML、CSS和JavaScript来实现了一个简单的无限层级目录树UI，并在勾选时实时获取了选择值。你可以根据实际需求对代码进行修改和扩展。如果你需要更复杂的功能或样式，可能需要进一步的开发和优化。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-02，如有侵权请联系 cloudcommunity@tencent.com 删除

checkbox