原生js多级下拉树

2019独角兽企业重金招聘Python工程师标准>>>

      最近项目中一个树结构有7,8级之多，每一级又有好多节点，出现在一棵树上的数据量巨大，7,8级的树让也前台的展示显得不容易，所以就想到了用下拉框的形式实现一颗下拉树，下拉树的大概只有3,4级，点击下拉树的某个叶节点，会在另一个div里显示出它的子节点树结构，这样就用下拉树并绑定事件把7,8层树的展示分成了俩个树的展示，一棵下拉树显示前3,4级的结构，另外一颗显示后几级的结构。

      实现的html代码比较简单，如下所示：

<div class="pull" id="pull"><span id="pullmsg"></span><a></a></div>
<div class="pull_tree" id="pull_tree"></div>
<div class="tree" id="tree"></div>

      第一个div表示下拉框，后面的A标签是下拉的图片，span里面则等待写入选中节点的内容，第二个div是下拉树的div，直接调用已经封装好的tree.js，第三个div是根据下拉树选择不同节点而改变内容的树结构。样式略。重点说下接口的事件绑定。

      树结构内容也就是数据json简单如下data = {name:'',items:[{name:'',items:[{},{},],{},{},,]}，name为节点内容，items为此节点下一级的节点，可以根据其他需求，在name与items之间添加其他属性，如id、data等都随便。

     简单介绍下 封装的tree中的接口代码为：

tree.events = {leafclick: evt.leafclick||function(sender){},leafdbclick: evt.leafdbclick||function(sender){}, nonleafclick: evt.nonleafclick||function(sender){}, nonleafdbclick: evt.nonleafdbclick||function(sender){} };

     对叶子节点和非叶子节点的单双击事件均做了引用接口，tree的创建Tree.create(data, evr)，只需传入data数据参数和evr事件对象即可。这样在evt的函数中写入方法以方便下拉树的点击实现另外一颗树的变化，回调函数如下：

var evr = {};
evr.leafdbclick = function () {
   tree.style.display = 'block';
   pull_tree.style.display = "none";
   tree.innerHTML = '';
   tree.appendChild(Tree.create(data2, evr1).div);
};
evr.leafclick = function (sender) {
	currentNode = sender;
	if (sender.tree.selected.parent){
		document.getElementById('pullmsg').innerHTML = currentNode.source.name;
	}	
};
evr.nonleafclick = function (sender) {
	currentNode = sender;
	if (sender.tree.selected.parent){
		document.getElementById('pullmsg').innerHTML = currentNode.source.name;
	}	    
};

在第二棵树中也可根据其他的数据参数data与evr事件对象绑定触发事件，点击下拉框的触发下拉树的click代码如下：

document.onclick = function(e) {
		var evt = e || window.event, target = evt.target || evt.srcElement;	
		var boole = false ;
		  for(var i=0;i<100;i++){    
			if(target.id == 'pull'||target.id == 'pull_tree'){
			    boole = true ;
			    break;
			}
			if(target.tagName == 'HTML'){
			    break;
			}
			target = target.parentNode;
		  }		
		if (!boole){			
		    pull_tree.style.display = 'none'; 	   
		    ispull = false;
            }
        else if(target.id== 'pull') {
		    if(!ispull){
			pull_tree.style.display = 'block'; 	   
			ispull = true;
			}else if(ispull){
			pull_tree.style.display = 'none'; 	   
			ispull = false;
			} 
		}else if(target.id =='pull_tree'){
		    pull_tree.style.display = 'block'; 	   
			ispull = true;		    
		    }	
    };

       这样基本实现了根据选择下拉树的一个节点生成此节点的子节点树结构。页面截图如下：

    

转载于:https://my.oschina.net/bothyan/blog/123444