JavaScript中的樹結構

我需要從Javascript對象數組創建樹結構。
我有這樣的事情（沒有定義兒童級）：JavaScript中的樹結構

var obj_1 = {id:1, title:"Title 1", parent:0}; 
var obj_2 = {id:2, title:"Title 1.1", parent:1}; 
var obj_3 = {id:3, title:"Title 1.2", parent:1}; 
var obj_4 = {id:4, title:"Title 1.1.1", parent:2}; 
var obj_5 = {id:5, title:"Title 2", parent:0}; 

var obj_list = [obj_1,obj_2,obj_3,obj_4,obj_5];

我需要：

var result = [{ 
       id:1, 
       title:"Title 1", 
       children:[ 
         {id:2, title:"Title 1.1", children:[....]} 
         {id:3, title:"Title 1.2"} 
         ] 
       }, 
       { 
       ... 
       } 
       ];

通過這樣的結構，我想創建HTML列表：

<ul> 
    <li><a>Title 1</a> 
     <ul> 
     <li><a>Title 1.1</a> 
      <ul> 
      <li>Title 1.1.1</li> 
      </ul> 
     </li> 
     <li><a>Title 1.2</a></li> 
     </ul> 
    </li> 
    <li><li><a>Title 2</a></li> 
</ul>

任何建議解決這個問題？
中間結構不是很重要，但我需要的是HTML列表。

來源

2013-07-16 enfix

這並不難，但你要求非常具體的代碼。當你嘗試編寫它時，你的問題是什麼？你有問題嗎？ –

轉換你的對象列表轉換成一個嵌套的對象：

var obj_nested_list = [], 
    obj; 

function fill_with_children(children_arr, parent_id) { 
    // find all objs with parent "parent" 
    for (var i = 0; i < obj_list.length; i++) { 
     obj = obj_list[i]; 
     if (obj.parent == parent_id) { 
      children_arr.push(obj); 
      obj.children = []; 
      fill_with_children(obj.children, obj.id); 
     } 
    } 

    children_arr.sort(function(a,b){ 
     return a.title.downcase == b.title.downcase; 
    }); 
} 

fill_with_children(obj_nested_list, 0);

使用嵌套對象打印嵌套的列表：

function print_list(list, container) { 
    for (var i = 0; i < list.length; i++) { 
     var li = document.createElement('li'); 
     li.innerHTML = list[i].title; 
     if (list[i].children.length > 0) { 
      var ul = document.createElement('ul'); 
      li.appendChild(ul); 
      print_list(list[i].children, ul); 
     } 
     container.appendChild(li); 
    } 
} 
print_list(obj_nested_list, document.getElementById('list'));

這裏有一個工作示例： http://jsfiddle.net/rotev/svFTa/1/

來源

2013-07-16 13:32:01

它的工作原理。謝謝 – enfix

我應該怎麼做才能按標題排列孩子？ – enfix

每次準備好子數組時，請使用array.sort（）函數。編輯答案。 –

以下應做你需要的。我建議學習遞歸，makeUL函數將是一個好的開始。

var obj_1 = {id:1, title:"Title 1", parent:0}; 
var obj_2 = {id:2, title:"Title 1.1", parent:1}; 
var obj_3 = {id:3, title:"Title 1.2", parent:1}; 
var obj_4 = {id:4, title:"Title 1.1.1", parent:2}; 
var obj_5 = {id:5, title:"Title 2", parent:0}; 
// make an object keyed by the ID 
var root = {}; 
var cnt = 1; 
try { obj = eval("obj_" + cnt); } catch(err) { obj = null; } 
while(obj) { 
    obj.children = []; 
    root[obj.id] = obj; 
    try { obj = eval("obj_" + (++cnt)); } catch(err) { break; } 
} 
// make the object treeified list 
var list = [] 
for(var k in root) { 
    var node = root[k]; 
    if(node.parent != 0) { 
     root[node.parent].children.push(node); 
    } else { 
     list.push(node); 
    } 
} 
// make HTML UL 
function makeUL(list, result) { 
    for(var i=0; i<list.length; i++) { 
     var node = list[i]; 
     var li = result.appendChild(document.createElement("li")); 
     var a = li.appendChild(document.createElement("a")); 
     a.innerHTML = node.title; 
     if(node.children.length > 0) { 
      makeUL(node.children, li.appendChild(document.createElement("ul"))); 
     } 
    } 
    return result; 
} 
var result = makeUL(list, document.createElement("ul")); 
console.log(result);

來源

2013-07-16 13:55:17

JavaScript中的樹結構

回答

相關問題