如何通过AJAX动态加载数据渲染Destroydrop dtree树形组件

解决方案 #

问题的核心原因是：页面加载完成后调用document.write()会清空当前页面的所有原有内容，重写整个文档。而Destroydrop dtree实例本身的toString()方法会直接返回渲染树所需的完整HTML字符串，我们只需要把这段字符串插入到指定容器即可，完全不需要调用document.write()。

另外你提到的script标签内的<!--和//-->是上古时期兼容不支持JS的浏览器的遗留写法，现在没有任何实际作用，直接忽略即可，不需要做特殊处理。

步骤1：提前在页面添加树容器 #

不要用动态修改script标签内容的方式实现渲染，先在页面固定位置预留好树的挂载容器：

<div class="dtree" id="treeContainer">
  <p><a href="javascript: d.openAll();">全部展开</a> | <a href="javascript: d.closeAll();">全部收起</a></p>
  <!-- 动态生成的树内容会插入到此处 -->
</div>

步骤2：动态渲染树的两种实现方式 #

方式1（更安全，优先推荐）：只从接口拿节点数据，本地手动构造树

不要直接执行接口返回的整段代码，只需要让接口返回节点数组，本地初始化dtree后批量插入节点即可：

// 假设AJAX请求拿到的节点数据格式如下
const nodeList = [
  {id:0, pid:-1, name:'我的示例树', url:''},
  {id:1, pid:0, name:'节点1', url:'example01.html'},
  {id:2, pid:0, name:'节点2', url:'example01.html'},
  // 其余节点...
]

// 初始化dtree实例
const d = new dTree('d')
// 批量添加节点
nodeList.forEach(node => {
  d.add(
    node.id, 
    node.pid, 
    node.name, 
    node.url || '', 
    node.title || '', 
    node.target || '', 
    node.icon || ''
  )
})
// 把生成的树HTML插入到预留容器中
document.getElementById('treeContainer').innerHTML += d.toString()

方式2：必须直接使用接口返回的整段构造代码的情况

如果接口已经固定返回完整的dtree构造代码，只需要把代码里的document.write(d)替换为插入容器的逻辑再执行即可：

// 假设从接口拿到的完整代码字符串为treeCode
let treeCode = `
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
document.write(d);
`
// 替换掉会清空页面的document.write逻辑
treeCode = treeCode.replace('document.write(d)', "document.getElementById('treeContainer').innerHTML += d.toString()")
// 执行处理后的代码
eval(treeCode)

之前方案失效的原因说明 #

• 动态修改script标签的innerHTML不会触发代码执行，浏览器仅会在首次解析到script标签时执行一次内部代码，后续修改内容不会重新执行
• 之前用eval执行失败的核心原因是代码里包含document.write(d)，执行后直接清空了页面，替换掉这行即可正常运行

内容的提问来源于stack exchange，提问作者Danystatic