javascript - TreeView 的路径名字符串数组

标签 javascript treeview

我有如下输入数据:

['Level 1/Level 2/Level 3/ Level4a',
'Level 1/Level 2/Level 3/ Level4b',
'Level 1/Level 2/Level 3/ Level4c',
'Level 1/Level 2/Level 3/ Level4a',
'Level 1c/Level 2d/Level 3b/ Level4d',
'Level 1c/Level 2d/Level 3b/ Level4e',
'Level 1c/Level 2d/Level 3b/ Level4f']

现在我想像这样将它转换为 treeview 数组:

tree: [
                {
                    name: 'Level 1',
                    children: [
                        {
                            name: 'Level 2',
                            children: [
                                {
                                    name: 'Level 3',
                                    children: [
                                        {name: 'Level 4a'},
                                        {name: 'Level 4b'},
                                        {name: 'Level 4c'}
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'Level 1c',
                    children: [
                        {
                            name: 'Level 2d',
                            children: [
                                {
                                    name: 'Level 3b',
                                    children: [
                                        {name: 'Level 4d'},
                                        {name: 'Level 4e'},
                                        {name: 'Level 4f'}
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]

有一种迭代的方法,但我想它太复杂了。 执行此操作的最佳方法是什么?

最佳答案

您可以获取最后插入的对象的数组,并检查名称是否与最后一个不相同。如果是,则添加一个新对象。

var data = ['Level 1/Level 2/Level 3/Level4a', 'Level 1/Level 2/Level 3/Level4b', 'Level 1/Level 2/Level 3/Level4c', 'Level 1/Level 2/Level 3/Level4a', 'Level 1c/Level 2d/Level 3b/Level4d', 'Level 1c/Level 2d/Level 3b/Level4e', 'Level 1c/Level 2d/Level 3b/Level4f'],
    tree = [],
    levels = [{ children: tree }];

data.forEach(s => s.split('/').forEach((name, i) => {
    if (!levels[i + 1] || levels[i + 1].name !== name) {
        levels[i].children = levels[i].children || [];
        levels[i].children.push(levels[i + 1] = { name });
    }
}));

console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

关于javascript - TreeView 的路径名字符串数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53066441/

相关文章:

python - 在odoo treeview中隐藏一些行

javascript - jQuery 队列,它是如何工作的?

javascript - 带有额外 li 的 Vue.js v-for 不呈现

javascript - 如何使用按钮更改 Highstock 图表的主题?

javascript - Jquery 插件在我按下按钮后工作

WPF TreeView - 如何滚动使展开的分支可见

.net - 如何在 TreeView 外部绘制 TreeView 节点+/-按钮?

Javascript - 如何使 getTime() 在所有计算机上统一?

c# - WPF:TreeView 获取父节点

c# - 如何在 WPF 中动态填充 treeview