製作樹對象

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

你可以這樣做。它會像你想要的那樣生成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
• 檢查，如果它是根，並將其添加，比打電話buildTree打印孩子。
• 對於父母的每個孩子，打印它。
• 如果有孩子，請致電buildTree也可以打印。
• 添加結尾div。

正如你可以看到它在這裏工作確定：

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

Answer 2

你可以通過做這樣的事情（我用普通的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