javascript - 从对象创建树

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>

To simplify the structure of the tree is changed, but the essence remains. Please tell me.

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

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

你可以这样做。它会生成您想要的 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/