1

所以我有一些像这样的 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
                    }
                ]
            },
        ]
    }
]
}

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

像这样，然后旋转了 90 度，所以它向下而不是向一边。 http://www.education.vic.gov.au/images/content/studentlearning/mathscontinuum/icecream.gif

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

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

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

那么，愿意为我指明正确的方向吗？你不必为我写几十行代码，只要给我一个指示，也许是一些伪代码，我应该把它放在哪里。

提前致谢！

更新

我来得有点远。只是想我会分享我的代码以供将来参考。我现在有一个填充的节点对象数组和一个基本的 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>');
            }
        }
    }
}

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

4

3 回答 3

1

假设您是ie8+，您可以使用 JSON 对象。此代码未经测试，但主要思想是您使用递归并传入允许打印元素的边界。这样每个元素都可以在不知道它的兄弟姐妹或孙子的情况下打印自己。此外，此代码假定您有打印所有内容的空间和一个神奇的函数 drawLine。

function printLevel(elem, start, end, level) {
    var width = end - start;  // Width this elem gets for printing
    var mid = start + mid / 2;  // midpoint for printing this elem's name
    var myName = document.createElement("p");
    myName.appendChild(document.createTextNode(elem.name));
    myName.x = mid - fontSize * elem.name.length / 2;  // fontSize in pixels
    myName.y = level * 20; 
    document.body.appendChild(myName);
    var children = elem.children;
    if (children !== null) {
        var childWidth = width / children.length;  // Each child gets a portion of elem's width
        for (var i = 0; i < children.length; i++) {
            printLevel(children[i], start + i * childWidth, end + (i + 1) * childWidth, level + 1);
            drawLine(elem, children[i]);
        }
    }
 }
 var tree = JSON.parse(response.text);
 printLevel(tree, 0, screen.innerWidth, 0);
于 2013-08-23T01:23:01.507 回答
1

我最近用淘汰赛实现了完全相同的东西，但是用 DOM 元素而不是画布呈现。

我是怎么做到的：

<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 >），但这并不重要。

现在，这只是显示。如果您需要交互性，您可能需要实现几个树遍历算法并在子节点中保留对父节点的引用（这很有帮助）。

于 2013-08-23T07:00:40.533 回答
0

抱歉，除了 PHP，我对其他语言不太了解。在 PHP 中，我将使用

// first degree
foreach ($result->children as $arr) { 
// Where $result is data i got from json_decode(fetch_data())
  echo $arr->name; // Sub-section A

     // second degree
     foreach ($arr->children as $arr2) {
        echo $arr2->name; //Procedure 1, Procedure 2 , ...
     }
}

希望你明白我的意思并申请你的java。

于 2013-08-23T01:11:57.283 回答