从XML字符串填充jstree

我想从一个字符串填充一个jstree容器来描述一个xml文档。这里是我的代码，用简化的XML文档：从XML字符串填充jstree

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/）。

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

来源

2016-07-22 szymtor

对XML的支持似乎有限。版本3的文档仅说明HTML或JSON输入为jstree()，即使在早期版本中有一个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 => xmlToObject(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>

来源

2016-07-22 22:11:28 trincot

从XML字符串填充jstree

回答

相关问题