JsTree с пользовательской структурой xml или json - PullRequest
Новая
       30

JsTree с пользовательской структурой xml или json

0 голосов
/ 07 ноября 2018

У меня есть структура 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), и у меня был тот же результат, как объяснено в этой теме:

Заполнение Jstree из строки XML

После преобразования его в 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>, и избавиться от <Feature> теги.

Я нашел эту тему на форуме: JsTree с пользовательскими данными json но не смог применить решение .. и не понял его полностью, если честно.

Я даже пытался рекурсивно воссоздать дерево, используя данные Json, но я не могу создать массив «Children» с несколькими элементами с одинаковым именем «text», каждый из которых имеет значение (как, наконец, файл Json) ). Это либо: 

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

или 

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

Если кто-нибудь знает, как я могу иметь дело с Jstree, используя мою структуру, или у вас есть идеи, пожалуйста.

Спасибо

1 Ответ

0 голосов
/ 10 ноября 2018

jsTree ожидает данные в определенном формате для создания дерева. Ваша структура должна быть проанализирована в 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()
        }
    });
});
...