时间戳

首页 > 解决方案 > 在树视图和平面视图之间切换

javascript - 在树视图和平面视图之间切换

问题描述

我试图在单击锚标记时在树视图和平面视图中显示 xml 数据。我已经使用 jstree 库来渲染树视图。最初，当加载数据并单击树视图时，我得到了树视图。当我切换到平面视图并再次尝试树视图时，数据仍显示在平面视图中，但正在调用实际的树视图函数。我也试过清除缓存，但没有用。关于如何在每个切换上正确显示它的任何想法？

HTML 代码

<div><a style="display: none;" onclick="treeView();" id="tree">Tree view</a>
    <a style="display: none;" onclick="flatView();" id="flat">Flat view</a></div>

Javascript代码

function treeView(){
let parser = new DOMParser()
  let xmlDoc = parser.parseFromString(data, "text/xml")
  localStorage.removeItem('jstree');
  $("#xml")
    .jstree({
      core: {
        cache:"false",
        data: xmlToJson(xmlDoc.documentElement),
      },
    })
    document.getElementById('tree').style.display='none';
    document.getElementById('flat').style.display='block';}
function xmlToJson(xmlNode) {
if (xmlNode.children.length == 0) {
  return {
    text:
      `<span style="color: #005bff">${xmlNode.tagName} </span>` +
      " : " +
      xmlNode.textContent,
  }
}
return {
  text: xmlNode.tagName,
  children: [...xmlNode.children].map((childNode) => xmlToJson(childNode)),
  state: {
    opened: true,
  },
}

}

function flatView(){
document.getElementById('xml').textContent = data;
document.getElementById('flat').style.display='none';
document.getElementById('tree').style.display='block';

}

标签： javascripthtmljstree

解决方案

推荐阅读