如何获得这个：<ul> <input type="text" placeholder="A" /> <ul> <input type="text" placeholder="B" /> <ul> <input type="text" placeholder="D" /> </ul> <ul> <input type="text" placeholder="E" /> </ul> </ul> <ul> <input type="text" placeholder="C" /> <ul> <input type="text" placeholder="F" /> </ul> <ul> <input type="text" placeholder="G" /> </ul> </ul></ul>从中：const graph = { A: ['B', 'C'], B: ['D', 'E'], C: ['F', 'G'], D: [], E: [], F: [], G: [], }常量图的意思是： A / \ B C / \ / \ D E F G不使用oop图。您可以从列表中删除输入，然后只需插入顶点的名称。
2 回答
大话西游666
TA贡献1817条经验 获得超14个赞
你需要通过二叉树算法即深度优先来绘制dom。
算法是：
绘制根元素，找到它的子元素
从第一个孩子开始，画它，找到它的孩子
继续重复步骤 2，直到到达树的底部。
然后从步骤 2 转到下一个子项，并执行与第一个子项相同的步骤。
通过执行上述步骤，我认为您可以使用深度优先二叉树算法轻松绘制 DOM。
看看下面的示例
<body>
<div id="root"></div>
</body>
const graph = {
A: ['B', 'C'],
B: ['D', 'E'],
C: ['F', 'G'],
D: [],
E: [],
F: [],
G: [],
}
const root = document.getElementById("root");
const findchildren = (node) => graph[node]
const drawNode = (node) => {
const input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("placeholder", node);
root.appendChild(input);
const children = findchildren(node)
if (children.length > 0) {
children.forEach(item => drawNode(item))
}
}
drawNode("A")
繁星淼淼
TA贡献1775条经验 获得超11个赞
我这样做，但并不享受。草稿，也许我会改进它，但我已经做了一整天，所以我累了。
const dataset = {
A: ['B', 'C'],
B: ['D', 'E'],
C: ['F', 'G'],
D: [],
E: [],
F: [],
G: [],
}
const $tree = document.querySelector('.tree')
function graphToHTML(node, root) {
if (Object.values(node)[0].length === 0) return
let ul = document.createElement('ul')
let input = document.createElement('input')
input.placeholder = Object.values(node)[0][0]
root.append(ul)
ul.append(input)
graphToHTML(
{ [Object.values(node)[0][0]]: dataset[Object.values(node)[0][0]] },
ul
)
ul = document.createElement('ul')
input = document.createElement('input')
input.placeholder = Object.values(node)[0][1]
root.append(ul)
ul.append(input)
graphToHTML(
{ [Object.values(node)[0][1]]: dataset[Object.values(node)[0][1]] },
ul
)
}
let ul = document.createElement('ul')
let input = document.createElement('input')
input.placeholder = Object.keys(dataset)[0]
ul.append(input)
$tree.append(ul)
graphToHTML({ A: ['B', 'C'] }, ul)
添加回答
举报
0/150
提交
取消