從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

回答

相關問題