拖放后如何保存新的jstree?

时间:2016-12-01 00:14:38

标签: jquery jstree jstree-dnd

我的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正确加载并具有所有基本功能,直到我拖放。我的实际树更复杂,但是我想说我要切换第一个和第二个答案。我可以使用拖放来执行此操作,但是当我保存并重新加载时,我的所有更改都不会保留。我目前正在尝试编写改变每个受影响节点的ID所需的所有功能,但这种情况非常快;除了编写该功能之外,还有任何选项可以让我保留这些更改吗?内置于jstree中的任何东西?

1 个答案:

答案 0 :(得分:1)

对于jsTree只需使用

var config_collection =  $('#ul_list_id_is_here').jstree(true).get_json('#', {flat:true});
如果你想从li结构休闲指令

创建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"
        }
    }
]

这会将数据父属性添加到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());