我的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中的任何东西?
答案 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());