保存jstree信息并展示新的tree

最新推荐文章于 2023-12-28 10:10:47 发布

succeedloveaaaa

最新推荐文章于 2023-12-28 10:10:47 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： jstree保存 jstree展示

本文链接：https://blog.csdn.net/succeedloveaaaa/article/details/55511523

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码如下：

<!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的展示后的节点顺序