javascript - 使用 JSON 数据的 HTML TreeMap

Question

所以我有一些像这样的 JSON(键/值因隐私原因而改变)。它基本上是一个带有“子”对象数组的对象，每个元素都有自己的“子”对象数组，等等。

{
"name": "Main Area",
"children": [
    {
        "name": "Sub-section A",
        "children": [
            {
                "name": "Procedure 1"
                "children": [
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    },
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    },
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    }
                ]
            },
            {
                "name": "Procedure 2"
                "children": [
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    },
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    },
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    }
                ]
            },
            {
                "name": "Procedure 3"
                "children": [
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    },
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    },
                    {
                        "name": "Sub-procedure A",
                        "children": null
                    }
                ]
            },
        ]
    }
]
}

...随着我的进行，它可能会变得更大/更深几倍。这里的目标是将此数据转换为(可折叠的) TreeMap ，然后使用 knockout.js(最好)将其显示在 HTML 页面上。尽管所有逻辑都必须是 JavaScript 代码(使用 jQuery AJAX 获取 JSON，以某种方式处理它，并显示它)。

像这样然后才旋转 90 度，这样它就会向下而不是向侧面。 http://www.education.vic.gov.au/images/content/studentlearning/mathscontinuum/icecream.gif

现在我知道那里有像 jsTree 这样的库，但关键是我希望这也成为一种学习体验，所以我想在这里创建我自己的代码。此外，jsTree 将其结构打印为目录树。我正在寻找的是一个更直观的自上而下的 TreeMap ，它填充了页面的整个宽度。

问题是，我卡住了。我只是无法理解所有这些嵌套的数组/对象。我可能花了大约 3 个小时尝试一些事情，创建了几个不同的函数来递归遍历整个数组，但我无法让它正常工作。

我想到的最新想法是以某种方式遍历 JSON 结构，从最深的元素开始，向上移动，以某种方式将步骤转换为 TreeMap 级别，直到我到达顶部，此时它完成了。

那么，愿意为我指明正确的方向吗？您不必为我编写几十行代码，只需给我一个指示，也许是一些伪代码，告诉我应该把它带到哪里。

提前致谢!

更新

我说得有点远了。只是想我会分享我的代码以供将来引用。我现在有一个填充的节点对象数组和一个基本的 ul/li 结构(以后仍然可以向它抛出 knockout.js)。仍然需要弄清楚 CSS/JS 部分，但这会随着我的进行而出现。

值得注意的是，我把JSON结构中的每一个“null”值都改成了“[]”，这样用起来更方便。

//node class
function node(label, children, node_id, parent_id) {
    this.label = label;
    this.children = children;
    this.node_id = node_id;
    this.parent_id = parent_id;
}

//tree class
function tree(root) {
    var self = this;
    self.root = root;
    if(!$.isArray(self.root.children)) {
        return;
    }
    self.nodeCount = 0;
    self.nodes = []; //This will be the main node array

    //Adds nodes to the array, recursive
    self.addNode = function(_node) {
        self.nodeCount++;
        self.nodes.push(_node);
        //Check if the branch ends here
        if(_node.children.length < 1) {
            return;
        }
        var tmpParent = _node;
        //Add children
        for(var i = 0; i < _node.children.length; i++) {
            self.addNode(new node(_node.children[i].name, _node.children[i].children, self.nodeCount, tmpParent.node_id));
        }
    }

    self.draw = function() {
        //Populate nodes array
        self.rootNode = new node(self.root.name, self.root.children, 0, -1);
        self.addNode(self.rootNode); //Kicks off the recursion
        //Create the first/"root" node
        $(".tree-wrapper").append('<ul id="0"><li class="title">'+ self.rootNode.label +'</li></ul>');
        //Create nodes and populate them with children
        for(var i = 0; i < self.nodes.length; i++) {
            //Check if the node has children
            if(self.nodes[i].children.length > 0) {
                //Wrap a new <ul> in a <li>, add a title <li> to the created <ul>
                $("#"+ self.nodes[i].parent_id).append('<li><ul id="'+ self.nodes[i].node_id +'"><li class="title">'+ self.nodes[i].label +'</li></ul></li>');
            } else {
                //Simply append a <li> with a label to the parent <ul>
                $("#"+ self.nodes[i].parent_id).append('<li id="'+ self.nodes[i].node_id +'">'+ self.nodes[i].label +'</li>');
            }
        }
    }
}

感谢所有回答的人!如果您有提示/技巧，请不要犹豫；)我的代码可能会以某种方式缩短/优化!

Answer 1

我最近实现了完全相同的东西，带有挖空，但使用 DOM 元素呈现，而不是 Canvas 。

我是怎么做到的:

<script ko template = "node">
    <div class="node">
        <a href="#" data-bind="click: toggleChildren()">Open children</a>
        <div class="children" data-bind="visible: childrenOpen, foreach: children, template: node"> 
        </div>   
    </div>
</script ko template>

<div class="nodes" data-bind="foreach: children, template: node">
</div>

在 ViewModel 方面:

function MyVM() {
    this.nodes = ko.observable([]); // this is a list of Node objects. each Node object has a list of children, that are also Node objects
}

ko.applyBindings(new MyVM());

在模型方面:

function Node(name, etc.) {
    var self = this;

    this.childrenOpen = ko.observable(false);
    this.children = ko.observable([]);

    this.toggleChildren = function() {
        self.childrenOpen(!self.childrenOpen());
    }
}

剩下要做的就是:1) 填充 ViewModel 上的节点；2) 编写 CSS，使其看起来像一棵树。

我实际上使用了嵌套无序列表 (< ul >< li >)，但这应该无关紧要。

现在，这只是展示。如果您需要交互性，您可能需要实现几个树行走算法并在子节点中保留对父节点的引用(这有很大帮助)。