Заполнение 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, который можно было активировать для поддержки 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>