一个同伙问我应当怎么年腋荷琐树的 JSON 数组生成 HTML，应用 <ul> 和 <li> 来构建页面元素。于是我简单的画了个树型构造图

然后写了对应的模仿数据(JavaScript 对象)

深度遍历

const data = { 
    name: "A", 
    nodes: [ 
        { name: "B", nodes: [{ name: "F" }] }, 
        { name: "C" }, 
        { 
            name: "D", 
            nodes: [ 
                { name: "G" }, 
                { name: "H" }, 
                { name: "I", nodes: [{ name: "J" }, { name: "K" }] } 
            ] 
        }, 
        { name: "E" } 
    ] 
};  

最后写了一个递归，生成了 HTML 的树型构造。本来是用 JavaScript ES6 写的，为了注解数据构造，这里改用 TypeScript 来写：

interface INode { 
    name: string; 
    nodes?: INode[]; 
} 
 
function makeTree(roots: INode[]): JQuery<HTMLElement> { 
    function makeNode(node: INode): JQuery<HTMLElement> { 
        const $div = $("<div>").text(node.name || ""); 
        const $li = $("<li>").append($div); 
        if (node.nodes && node.nodes.length) { 
            $li.append(makeNodeList(node.nodes)); 
        } 	
			
 1/5    1 2 3 4 5 下一页 尾页
	
			

　　推荐阅读
　　让我们一起来消灭CSRF跨站请求伪造（上）
            导致HTTP verb应用欠妥的重要原因在于浏览器对HTTP标准的支撑存在缺点，这是一种汗青遗留问题。在XML HTTP  Request(XHR)风行起来之前，我们几乎得依附特定框架和代码库来应用HTTP verb(除了GET和POST之>>>详细阅读


本文标题：使用递归遍历并转换树形数据（以TypeScript为例）
地址：http://www.17bianji.com/lsqh/38416.html
 1/2    1