从对象制作树

Question

目的：

    var src = {
    0: {child: [1], title: "Books"},
    1: {child: [2,3], title: "Programming"},
    2: {title: "Languages"},
    3: {child: [4,5],title: "Databases"},
    4: {title: "MongoDB"},
    5: {title: "dbm"}
};

你如何以这个对象的形式构建一棵树

<div id="tree">
    <ul>
        <li id="0">
            <span>Books</span>
            <ul>
                <li id="1">
                    <span>Programming</span>
                    <ul>
                        <li id="2">
                            <span>Languages</span>
                        </li>
                        <li id="3">
                            <span>Databases</span>
                            <ul>
                                <li id="4">
                                    <span>MongoDB</span>
                                </li>
                                <li id="5">
                                    <span>dbm</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

树的结构简化了，但本质不变。 请告诉我。

我试过了，但数据结构不同

var data = {
    0: {title: "Books"},
    1: {pid: 0, title: "Programming"},
    2: {pid: 1, title: "Languages", ch: 0},
    3: {pid: 1, title: "Databases"},
    4: {pid: 3, title: "MongoDB", ch: 0},
    5: {pid: 3, title: "dmb", ch: 0}
};          
    function makeTree(data) {
    var child = [];
    var i = 0;
    for (var key in data) {
        if (data[key].hasOwnProperty('pid')) {
            if (data[key].hasOwnProperty('ch')) {
                child[i] = document.createElement('li');
                child[i].setAttribute('id', key);
                child[i].innerHTML = data[key].title + ' <span></span></li>';
            }
            else {
                child[i] = document.createElement('li');
                child[i].setAttribute('id', key);
                child[i].innerHTML = data[key].title + '<span></span>';
                child[i].innerHTML += '<ol><li id=' + key + '>' + data[key].title + '<span></span></li></ol>';
            }
            document.getElementById(data[key].pid + "").appendChild(child[i]);
            i++;
        }
        else {
            var li = document.createElement('li');
            li.setAttribute('id', key);
            li.innerHTML = data[key].title + '<span></span>'
            tree.appendChild(li);
        }
    }
}

它有效，但不正确

Answer 1

你可以通过做这样的事情来做到这一点（我使用了普通的 javascript，因为你没有用 jquery 或其他方式标记问题）：

var src = {
    0: {child: [1], title: "Books"},
    1: {child: [2,3], title: "Programming"},
    2: {title: "Languages"},
    3: {child: [4,5],title: "Databases"},
    4: {title: "MongoDB"},
    5: {title: "dbm"}
};

var rootNodes = [];

// create dom elements
var domElements = [];
for(var prop in src) {
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    var span = document.createElement('span');
    span.innerHTML = src[prop].title;
    li.appendChild(span);
    ul.appendChild(li);
    domElements[domElements.length] = ul;
}

// nest elements
for(var i = 0; i < domElements.length; i++) {
    var domElement = domElements[i];
    var dataItem = src[i];
    var children = dataItem.child;
    if(children) {
        for(var j = 0; j < children.length; j++) {
            var childDomElement = domElements[children[j]];
            domElement.firstChild.appendChild(childDomElement);
        }
    } else {
        rootNodes[rootNodes.length] = domElement;
    }
}

// output rootNodes
console.log(rootNodes); // gives the desired output

Answer 2

你可以这样做。 它会像您想要的那样生成 HTML。 它从父级到子级递归迭代。

var outputHtml = '<div id="tree">';
function buildTree(parrent)
{
    var currentParent = parrent;
     outputHtml += '<ul>';
     if(parrent === -1)
     {
         outputHtml += '<li id="' + 0 + '">';
         outputHtml += '<span>'+ src[0].title +'</span>';
         buildTree(0);
         outputHtml += '</li>';
     }
    else{
         for(var i = 0, childArray = src[currentParent].child, iLength = childArray.length; i < iLength; ++i)
         {
             outputHtml += '<li id="' + childArray[i]+ '">';
             outputHtml += '<span>'+ src[childArray[i]].title +'</span>';
             if(src[childArray[i]].child)
                 buildTree(childArray[i]);
             outputHtml += '</li>';
         }
    }

     outputHtml += '</ul>';
}
buildTree(-1);
outputHtml += '</div>';

• 添加开场div
• 检查它是否是 root 并添加它，然后调用buildTree打印子项。
• 对于父母的每个孩子，打印它。
• 如果它有孩子，也调用buildTree打印它们。
• 添加结束 div。

如您所见，它在这里工作正常：

http://jsfiddle.net/ALUVu/1/