Auffüllen von Jstree aus XML-Zeichenfolge

Question

Ich versuche, einen Jstree-Container mit Daten aus einer Zeichenfolge, die ein XML-Dokument beschreibt, zu füllen. Hier ist mein Code, mit einem vereinfachten XML-Dokument:

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

(auch auf codepen: http://codepen.io/szymtor/pen/XKqApq/).

Das Ergebnis ist ein gut strukturierter Baum, aber ohne Knotenbeschriftungen (siehe Bild unten). Wie sollte ich die Knotenbeschriftungen bereitstellen? Oder mache ich es falsch?

Answer 1

Unterstützung für XML scheint begrenzt. Die Dokumentation der Version 3 spricht nur von HTML oder JSON Eingabe für jstree(), obwohl in früheren Versionen eine xml_data plug-in war, die für XML-Unterstützung aktiviert werden konnte.

Ich würde vorschlagen, Sie würden nur dieses Problem umgehen, indem Sie Ihre XML zu JSON mit dieser Funktion konvertieren:

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

dieses Beispiel Siehe:

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>