javascript - 具有一维数组的树状结构

Question

我有单维数组 {1, 2, 3, 4.. }，其中 4 是 3 的孩子，3 是 2 的孩子，依此类推。我需要使用淘汰赛 js 将元素显示为树视图结构。是否可以在不创建父子数组结构的情况下做到这一点？

Answer 1

是的，这是可能的。看看这个小提琴：http: //jsfiddle.net/eF5VL/

该解决方案的核心是childrenOf过滤纯项数组并仅返回指定父项的子项的函数。请注意，ko.computed如果您的普通数组是可观察的并且主题可以更改，则此功能也可能是。

var viewModel = {
    items: [
        { id: 1, parent: 0, name: "item 1" },
        { id: 2, parent: 0, name: "item 2" },
        { id: 3, parent: 2, name: "item 2.1" },
        { id: 4, parent: 2, name: "item 2.2" },
        { id: 5, parent: 0, name: "item 3" },
        { id: 6, parent: 5, name: "item 3.1" },
        { id: 7, parent: 6, name: "item 3.1.1" },
        { id: 8, parent: 0, name: "item 4" }
    ],
    childrenOf: function(parent){
        return ko.utils.arrayFilter(
            viewModel.items,
            function(item){ return item.parent == parent; }
        );
    }
};

ko.applyBindings(viewModel);

标记：

<script id="tree_item" type="text/html">
    <li><span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'tree_item', foreach: $root.childrenOf(id) }"></ul>
    </li>
</script>

<ul data-bind="template: { name: 'tree_item', foreach: childrenOf(0) }"></ul>

标记也很清晰和简单：每个树项只有一个模板。

更新：

如果您确定您的项目已正确排序，您可以使用我在这里回答的另一种解决方案：如何使用敲除在树模型中显示 json 数据？

您只需对项目进行一次预处理即可为每个项目定义嵌套级别。