Как сохранить новое jstree после перетаскивания?

Question

Мои данные Jstree имеют следующую конфигурацию:

config_collection = 
[
    {
        id: "1"
        parent: "#"
        text: "First Question"
    },
    {
        id: "1.1"
        parent: "1"
        text: "First Answer"
    },
    {
        id: "1.2"
        parent: "1"
        text: "Second Answer"
    }
]

И моя установка Jstree:

$("#jstree_div").jstree({
    'core' : {
        'data' : config_collection,
        'check_callback' : true,
        'multiple' : false
    },
    'plugins' : [ 'dnd' ]
});

Это Jstree загружается правильно и имеет все основные функциональные возможности, пока я не перетащить. Мое настоящее дерево более сложное, но, скажем, я хочу поменять первый и второй ответ. Я могу использовать перетаскивание, чтобы сделать это, но когда я сохраняю и перезагружаю, ни одно из моих изменений не сохраняется. В настоящее время я пытаюсь закодировать все функциональные возможности, необходимые для изменения идентификаторов каждого затронутого узла, но это очень быстро становится очень сложным; Помимо кодирования этой функциональности, есть ли варианты, позволяющие мне сохранить эти изменения? Что-нибудь встроено в Jstree?

Answer 1

Для jsTree просто используйте

var config_collection =  $('#ul_list_id_is_here').jstree(true).get_json('#', {flat:true});

другой подход, если вы хотите создать JSON из инструкции структуры структуры

изменить данные JSON как

config_collection = 
[
    {
        id: "1"
        parent: "#"
        text: "First Question",
        li_attr:{
           "data-parent" : "#"
        }
    },
    {
        id: "1.1"
        parent: "1"
        text: "First Answer",
        li_attr:{
           "data-parent" : "1"
        }
    },
    {
        id: "1.2"
        parent: "1"
        text: "Second Answer",
        li_attr:{
           "data-parent" : "1"
        }
    }
]

это добавит атрибут data-parent к li и вызовет buildJson() для создания структуры li как json

    var buildJson = function (root){
        if(!root){
            root='#ul_list_id_is_here';
        }
        var  result = [];
        // get first deepth of li list
        $('ol:first > li',root).each(function() {
            var itemdata = {};
//if you want to collect all attribute of li tag then use here 
//          $.each($(this).data(), function(key, value) {
//              itemdata[key] = value;
//          });

            itemdata["id"]      = $(this).attr('id');
            itemdata["parent"]  = $(this).attr('data-parent');
            itemdata["text"]    = $(this).text();
            // check li does have children 
            if($(this).children("ol").length){
                if($(this).find("ol li").length){
                    itemdata["children"] = buildJson($(this));
                }
            }
            result.push(itemdata);
        });
     return result;
    }
console.log(buildJson());