从 xml 字符串填充 jstree答案

【问题标题】：Populating jstree from xml string从 xml 字符串填充 jstree
【发布时间】：2016-07-22 21:08:09
【问题描述】：

我正在尝试使用描述 xml 文档的字符串中的数据填充 jstree 容器。这是我的代码，带有简化的 xml 文档：

var xmlText = "<root>A<node>B</node></root>";
var xml = (new DOMParser()).parseFromString(xmlText,'text/xml');    
$('#jstree').jstree({"core": {data: xml.documentElement}});

（也在 codepen 上：http://codepen.io/szymtor/pen/XKqApq/）。

结果是一棵结构良好的树，但没有节点标签（见下图）。我应该如何提供节点标签？还是我做错了？

【问题讨论】：

标签： javascript xml jstree

【解决方案1】：

对 XML 的支持似乎有限。版本 3 的文档仅提及 jstree() 的 HTML 或 JSON 输入，尽管在早期版本中可以激活 xml_data plug-in 以支持 XML。

我建议您通过使用此函数将您的 XML 转换为 JSON 来解决这个问题：

function xmlToJson(xmlNode) {
    return {
        text: xmlNode.firstChild && xmlNode.firstChild.nodeType === 3 ? 
                  xmlNode.firstChild.textContent : '',
        children: [...xmlNode.children].map(childNode => xmlToJson(childNode))
    };
}

看这个例子：

function xmlToJson(xmlNode) {
    return {
        text: xmlNode.firstChild && xmlNode.firstChild.nodeType === 3 ? 
                  xmlNode.firstChild.textContent : '',
        children: [...xmlNode.children].map(childNode => xmlToJson(childNode))
    };
}

var xmlText = "<root>A<node>B<node>C</node></node></root>";

var xml = (new DOMParser()).parseFromString(xmlText,'text/xml');

$('#jstree').jstree({
    core: {
      data: xmlToJson(xml.documentElement)
    }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree">
</div>

【讨论】：