Заполнение jstree из строки xml

Question

Я пытаюсь заполнить контейнер jstree данными из строки, описывающей XML-документ. Вот мой код, с упрощенным 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/).

В результате получается хорошо структурированное дерево, но без меток узлов (см. Рисунок ниже). Как я могу предоставить метки узлов? Или я делаю это неправильно?

Answer 1

Поддержка 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>