您的位置：首页 > Web前端 > JavaScript

保存jstree信息并展示新的tree

2017-02-17 16:10 162 查看

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
</style>
<link rel="stylesheet" href="jstree/themes/default/style.min.css" />
</head>
<body>

<h1>Inline data demo</h1>
<div id="treeData1">
<div id="treeDiv" class="demo"></div>
</div>

<div id="treeData2">
<div id="treeDiv2" class="demo"></div>
</div>
<script src="jstree/jquery.min.js"></script>
<script src="jstree/jstree.min.js"></script>

<script>
//初始化树字符串
initTreeStr='[{ "id" : "root1", "parent" : "#", "text" : "root1" ,"data":"2"}, '
+' { "id" : "root2", "parent" : "#", "text" : "root2","data":"1"} ,'
+' { "id" : "child1", "parent" : "root1", "text" : "child1" ,"data":"3"}, '
+' { "id" : "child2", "parent" : "root1", "text" : "child2" ,"data":"4"}] ';

//初始化树
initTree('treeDiv',initTreeStr);

var allId="";
var allStr="";

function initTree(id,data){
$('#treeData1').html('<div id="treeDiv" class="demo"></div>');
$('#treeDiv').jstree({
"checkbox" : {
"keep_selected_style" : false
},
'plugins' : [ "dnd", "types", "wholerow","checkbox","unique"],
'core' : {
'check_callback' : true,
'data' : JSON.parse(data)
}
});
$('#treeDiv').on('changed.jstree', function (e, data) {
getAllId(data);
initTree2(allStr);
});
$('#treeDiv').on('move_node.jstree',function(e,data){
getAllId(data);
initTree2(allStr);
});
}

function initTree2(data){
vdata=standardJson(data);
//清空上一颗树信息
$('#treeData2').html('<div id="treeDiv2" class="demo"></div>');
$('#treeDiv2').jstree({
"checkbox" : {
"keep_selected_style" : false
},
'plugins' : [ "dnd", "types", "wholerow","checkbox","unique"],
'core' : {
'check_callback' : true,
'data' : JSON.parse(vdata)
}
});
$('#treeDiv2').on('changed.jstree', function (e, data) {
});
$('#treeDiv2').on('move_node.jstree',function(e,data){
});
}

function getAllId(data){
allId="";
allStr="";
var obj=data.instance._model.data;
for(o in obj){
if(obj[o].id=='#'&&obj[o].children!=''){
getId(obj,obj[o]);
}
}
allId=allId.substr(0,allId.length-1);
allStr=allStr.substr(0,allStr.length-1);
return allId;
}
//从父节点递归获取其所有子节点信息，并保存所有节点的id和树节点的字符串
function getId(obj,parent){
//不保存根节点的，tree展示不需要
if(parent.id!='#'&&parent.state.selected==true){
allId=allId+parent.id+",";
allStr=allStr+JSON.stringify(parent)+",";
}

if(parent.children!=null&&parent.children!=''){
for(i in parent.children){
//获取child的id
var child=parent.children[i];
getId(obj,obj[child]);

}

}
}

//过滤掉children和children_d元素，避免展示子节点重复的问题
function standardJson(jsonStr){
var json=JSON.parse("["+jsonStr+"]");
var str="[ ";
for(var o in json){
var childObj=json[o];

if(childObj.id!='#'){
if(childObj.children!=null&&childObj.children!=''){
delete childObj["children"];
delete childObj["children_d"];
}
if(childObj.original!=null){
delete childObj["original"];
}
var id=JSON.stringify(childObj);
str=str+id+",";
}
}
str=str.substr(0,str.length-1);
str=str+" ]";
return str;
}

</script>

</body>
</html>

调试的过程中遇到不少问题，这里总结一下：

1、在创建新的tree的时候，要清空之前tree的数据，不然不会变：

//不行，树没有状态了
$('#treeDiv2').jstree(true).refresh();
//不行，一直显示load
$('#treeDiv2').removeData();
//最后试了这个方法才行：
$('#treeData2').html('<div id="treeDiv2" class="demo"></div>');

2、在展示已经修改之后的树时，发现出现了重复的子节点，解决办法：

要删掉节点中的children和children_d元素，不用怕丢失了节点间的关系，因为还有parent元素存在

3、展示tree的时候，根节点（即是id为“#”的节点）可以没有，但不能少了根节点以外的任何父节点，不然会报错，tree就加载不了

4、同级节点的字符串的顺序决定了tree的展示后的节点顺序

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jstree保存 jstree展示

相关文章推荐

新的分享

章节导航