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
                    }
                ]
            },
        ]
    }
]
}

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

像这样只旋转90度所以它向下而不是向侧面旋转。 http://www.education.vic.gov.au/images/content/studentlearning/mathscontinuum/icecream.gif

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

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

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

那么，愿意指出我正确的方向吗？你不必为我写几十行代码，只是给我一个指示，也许是一些假代码，我应该把它拿去。

提前致谢！

更新

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

假设您是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);

Answer 2

我最近使用knockout实现了完全相同的东西，但是使用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使其看起来像一棵树。

我实际上使用了嵌套的无序列表（＆lt; ul＆gt;＆lt; li＆gt;），但这无关紧要。

现在，这只是显示。如果你需要交互性，你可能需要实现一些树行走算法并保留对子节点中父节点的引用（这有很大帮助）。

Answer 3

抱歉，除了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。

使用JSON数据的HTML树图

3 个答案: