後序遍歷JavaScript或jQuery的樹創建HTML代碼

Question

我想創建HTML代碼，這樣

<ul> 
    <li>子菜單1 
     <ul> 
      <li>子菜單1.1</li> 
      <li>子菜單1.2 
       <ul> 
        <li>子菜單1.2.1</li> 
        <li>子菜單1.2.2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>子菜單2 
     <ul> 
      <li>子菜單2.1</li> 
      <li>子菜單2.2 
       <ul> 
        <li>子菜單2.2.1</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>子菜單3</li> 
</ul> 

現在，我一直在傳遞一些JSON數據爲HTML頁面這樣

[{ 
    id: 1, 
    name: '子菜單1', 
    parentid: 
}, { 
    id: 2, 
    name: '子菜單2', 
    parentid: 
}, { 
    id: 3, 
    name: '子菜單3', 
    parentid: 
}, { 
    id: 4, 
    name: '子菜單1.1', 
    parentid: 1 
}, { 
    id, 5, 
    name: '子菜單1.2', 
    parentid: 1 
}, { 
    id: 6, 
    name: '子菜單1.2.1', 
    parentid: 5 
}, { 
    id: 7, 
    name: '子菜單1.2.2', 
    parentid: 5 
}, { 
    id, 8, 
    name: '子菜單2.1', 
    parentid: 2 
}, { 
    id: 9, 
    name: '子菜單2.2', 
    parentid: 2 
}, { 
    id: 10, 
    name: '子菜單2.2.1', 
    parentid: 9 
}, { 
    id: 11, 
    name: '子菜單3', 
    parentid: 
}] 

所以我想寫一些JavaScript或jQuery代碼來創建HTML，因爲我想

也許有一些方法來觸摸目標

也許序遍歷樹 時要查看根節點，然後像「<ul><li></li>....</ul>」添加childnode名單根節點，使他們能夠創造<li><ul>...</ul></li>

對不起我的英語很差

你可以得到它？

你能幫助我嗎？

Answer 1

你在正確的軌道上。我們可以通過執行深度優先遍歷來打印樹。對於每個節點，我們打印開始標記和name值，然後下降到每個孩子。遞歸完成後，我們打印結束標記。

下面的代碼在名爲id_to_node的索引的幫助下構建樹，該索引將id鍵值映射到先前構建的節點。這假設輸入數組包含以這樣一種方式排序的對象，即每個parentid引用數組中的較早元素。如果不是這樣，則必須遍歷輸入兩次：第一次構建索引，第二次構建樹。

var data = [ { id: 1, name: '子菜單1' }, 
 
      { id: 2, name: '子菜單2' }, 
 
      { id: 3, name: '子菜單3' }, 
 
      { id: 4, name: '子菜單1.1', parentid: 1 }, 
 
      { id: 5, name: '子菜單1.2', parentid: 1 }, 
 
      { id: 6, name: '子菜單1.2.1', parentid: 5 }, 
 
      { id: 7, name: '子菜單1.2.2', parentid: 5 }, 
 
      { id: 8, name: '子菜單2.1', parentid: 2 }, 
 
      { id: 9, name: '子菜單2.2', parentid: 2 }, 
 
      { id: 10, name: '子菜單2.2.1', parentid: 9 } ]; 
 

 
var id_to_node = {},   // Map id values to nodes. 
 
    tree = { children: [] }; // The root of the tree. 
 

 
for (var i = 0; i < data.length; ++i) { 
 
    var object = data[i],  // Iterate over the objects. 
 
     node = { id: object.id, name: object.name, children: [] }; 
 
    id_to_node[object.id] = node; 
 
    if (object.parentid === null || object.parentid === undefined) { 
 
    var parent = tree;   // Figure out the object's parent. 
 
    } else { 
 
    var parent = id_to_node[object.parentid]; 
 
    } 
 
    parent.children.push(node); // Add the node to the parent. 
 
} 
 

 

 
// Makes whitespace for each level of the tree. 
 
function indent(depth) { 
 
    var spaces = []; 
 
    for (var i = 0; i < depth; ++i) { 
 
    spaces.push(' '); 
 
    } 
 
    return spaces.join(''); 
 
} 
 

 
// Recursively prints the tree. 
 
function print(node, depth) { 
 
    document.write(indent(depth)+'&lt;ul&gt;\n'); 
 
    for (var i = 0; i < node.children.length; ++i) { 
 
    var child = node.children[i]; 
 
    document.write(indent(depth+1)+'&lt;li&gt;'+child.name); 
 
    if (child.children.length > 0) { 
 
     document.write('\n'); 
 
     print(child, depth+2); 
 
     document.write(indent(depth+1)); 
 
    } 
 
    document.write('&lt;li&gt;\n'); 
 
    } 
 
    document.write(indent(depth)+'&lt;ul&gt;\n'); 
 
} 
 

 
document.write('<pre>'); 
 
print(tree, 0); 
 
document.write('</pre>');