具有自定义 xml 或 json 结构的 JsTree答案

【问题标题】：JsTree with custom xml or json structure具有自定义 xml 或 json 结构的 JsTree
【发布时间】：2018-11-07 14:12:54
【问题描述】：

我有一个如下所示的 XML 结构：

<RootFeature>
<Name>MainFeature</Name>
<Subfeatures>
    <Feature>
        <Name>Feature1</Name>
        <Subfeatures>
            <Feature>
                <Name>Feature1_1</Name>
        </Feature>
            <Feature>
                <Name>Feature1_2</Name>
        </Feature>
            <Feature>
                <Name>Feature1_3</Name>
        </Feature>
        </Subfeatures>
    </Feature>
    <Feature>
        <Name>Feature2</Name>
    </Feature>
    <Feature>
        <Name>Feature3</Name>
        </Feature>
    <Feature>
        <Name>Feature4</Name>
        </Feature>
    <Feature>
        <Name>Feature5</Name>
    </Feature>
    <Feature>
        <Name>Feature6</Name>
    </Feature>
    <Feature>
        <Name>Feature7</Name>
    </Feature>
</Subfeatures>

我想在上面使用 Jstree，并创建一棵树。我尝试直接在其上应用 Jstree (XML)，结果与本主题中解释的结果相同：

Populating jstree from xml string

将其转换为 Json 后（使用以下库：https://goessner.net/download/prj/jsonxml/），我有这个：

 "RootFeature":{
"Name":"Feature1",
"Subfeatures":{"Feature":[
{
  "Name":"Feature1",
  "Subfeatures":{"Feature":[
    {"Name":"Feature1_1"},
    {"Name":"Feature1_2"},
    {"Name":"Feature1_3"}
    ]}
},
{"Name":"Feature2"},
{"Name":"Feature3"},
{"Name":"Feature4"}, 
{"Name":"Feature5"},
{"Name":"Feature6"},
{"Name":"Feature7"}
]}

我搜索了如何在我的结构上应用 Jstree，知道我必须遵循某种格式，其中 <Name> 标签必须由 <text>、<Subfeatures> 替换为 <children>，并摆脱 @987654330 @标签。

我在论坛上发现了这个话题：JsTree with custom json data 但无法应用解决方案..老实说完全不理解。

我什至尝试使用 Json 数据递归地重新创建树，但我无法创建一个数组“Children”，其中包含多个具有相同名称“text”的元素，每个元素都有一个值（最终就像一个 Json 文件）。要么：

"Children":
"text1":"Feature1",
"text2":"Feature2",
"text3":"Feature3",

或

"Children":
"0":"Feature1",
"1":"Feature2",
"2":"Feature3",

如果有人知道我如何使用我的结构处理 Jstree，或者有任何想法，欢迎您。

谢谢

【问题讨论】：

标签： javascript json xml jstree jstree-search

【解决方案1】：

jsTree 需要特定格式的数据来创建树。您的结构需要解析为类似于here 描述的 JSON 结构。将 XML 转换为 JSON 后，您可以使用下面的解析器。

function getFeature(s, t) {
    t.text = s["Name"] ? s["Name"] : "";
    if (s.hasOwnProperty("Subfeatures")) {
        t.children = []; 
        s.Subfeatures.Feature.forEach(function (f, i) {
            t.children.push({})
            getFeature(f, t.children[i]);
        });
    }
}

function ParseData() {
    //Convert XML to JSON prior to this.

    var oSourceJSON = {
        "RootFeature": {
            "Name": "Feature1",
         ...
         ...
         ...

    };

    var result = [];
    if (oSourceJSON.hasOwnProperty("RootFeature")) {
        result.push({});
        getFeature(oSourceJSON.RootFeature, result[0]);
    }
    return result;
}

$(document).ready(function () {
    $('#jstree_demo_div').jstree({
        core: {
            //Note: If you use an external service use a callback method here
            data: ParseData()
        }
    });
});

【讨论】：