从xml字符串填充jstree [英] Populating jstree from xml string

问题描述

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

  var xmlText =< root> A< node> B< / node> ;< /根>中; 
 var xml =（new DOMParser（））。parseFromString（xmlText，'text / xml'）; 
 $（'＃jstree'）。jstree（{core：{data：xml.documentElement}}）; 
  

（同样在codepen：

解决方案

对XML的支持似乎有限。版本3的文档仅提及 HTML 或 JSON 输入 jstree（），即使在早期版本中有一个 xml_data插件，可以激活XML支持。

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

  function xmlToJson（xmlNode）{
 return {
 text：xmlNode.firstChild&& xmlNode.firstChild.nodeType === 3？ 
 xmlNode.firstChild.textContent：''，
 children：[... xmlNode.children] .map（childNode => xmlToJson（childNode））
}; 
} 
  

参见此示例：

< pre class =snippet-code-js lang-js prettyprint-override> 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 =stylesheethref =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>  

I am trying to populate a jstree container with data from a string describing an xml document. Here's my code, with a simplified xml document:

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

(also on codepen: http://codepen.io/szymtor/pen/XKqApq/).

The result is a well-structured tree, but without node labels (see image below). How should I provide the node labels? Or am I doing it wrong?

解决方案

Support for XML seems limited. The documentation of version 3 only speaks of HTML or JSON input for jstree(), even though in earlier versions there was a xml_data plug-in that could be activated for XML support.

I would suggest you would just work around this, by converting your XML to a JSON with this function:

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

See this example:

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>

这篇关于从xml字符串填充jstree的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！