后序遍历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>');