JS自定义树的实现



/**
 * <h3>树</h3>
 * 方法1：addRootNodes ->增加根节点
 * 方法2：addChild->>增加子节点
 * 说明：该脚本主要为了页面请求动态创建树节点。
 *     该树依赖于 css/tree.css, images图片 
 *     
 * @author IUPRG
 */


/**
 * 构造
 * @param   treeID:树容器的div ID
 */


var myTree=function(treeID){
	
	this.id = treeID;
	if (treeID) this.id = treeID;
	this.outerClassName = "treeUl";
	this.node = null;
	this.container = document.getElementById(this.id);
	this.container.innerHTML = ""; //clear innerHTML
	this.outer = document.createElement("ul");
	this.outer.className = this.outerClassName;
	this.container.appendChild(this.outer);
	this.arrClassName   = "foldArr";
 	this.idTag = treeID + "TnA"; //节点 a标签 id 前缀
	this.treeNodeIDTag = treeID + "Tn"; //节点  Node id 前缀
	this.curNode = function(){
		
	};//当前节点
	 
};
var termNode = function(){
	this.Id       = null; //节点id
	this.dataId   = null;//数据id
	this.element  = null;//li元素
	this.title    = "";//标题
	this.hasChild = 0; //是否包含子节点, 0:否 1:是
};




/**
 * 调试输出
 */
myTree.prototype.out=function(){

  alert(this.container.innerHTML);
};
/**
 * 清除容器innerHTML
 */
myTree.prototype.clear=function(){
	this.outer.innerHTML="";
	//alert(this.outer.id + "--innerHTML:");
};

myTree.prototype.ajaxGet =function(action,data,callback){
	$.ajax({type:'get',url:action,data:data,dataType:'json',cache:false,async: false,error:function(data){},success:callback});
};
/**
 * 清除节点 内容,以便增加新节点
 * 注意:此时只清除  UL ,li下的其他内容不可删除
 * @param node
 */
myTree.prototype.clearNode=function(node){
 
	var ul= this.getUl(node.element);
    if (ul) {
    	ul.innerHTML="";
    }else{
    	//移除li的子元素
    	if (node.hasChildNodes){
   		 var childs = node.childNodes;    
   		   for(var i = childs.length - 1; i >= 0; i--) {
   			   if (childs[i].nodeName.toUpperCase() =='LI'&&childs[i].nodeType==1) {
   				node.removeChild(childs[i]); 
   			   }
   		   }  
    	}
    	
    };
	
};

/**
 * 为指定的节点增加 “箭头”
 * @param node 
 */
myTree.prototype.addArrow=function(node){
	 
	var ul= this.getUl(node.element);
    if (ul==null||ul==undefined) {
    	var _ul=document.createElement("ul");
    	//node.appendChild(ul);
    	node.element.appendChild(_ul);
    	var ii=node.element.firstChild.firstChild;
    	if (ii) ii.className="foldArr";
    }
	
};
/**
 * 删除指定节点的"箭头"
 * @param node
 */
myTree.prototype.delArrow=function(node){
	 
	var ul= this.getUl(node.element);
    if (ul) {
    	node.element.removeChild(ul);
    	var ii=node.element.firstChild.firstChild;
    	if (ii) ii.className="";
    }
	
};

/**
 * 建立一个树的节点
 * @param id-节点的id,作为节点id的关键值
 * @param title-节点的标题
 * @param hasChild-是否包含子节点，0：不包含，当前节点属于叶子 1:包含
 * @param methodName-节点触发的js方法名，比如 "open(10)"
 * @returns dom元素
 */
myTree.prototype.createNode=function(id,title,hasChild,methodName){
	
	var li = document.createElement("li");
	
	var a = document.createElement("a");
	
	var iclassName="";
	
	a.href = "javascript:;";
	
	if (methodName){
		a.href = "javascript:" + methodName + ";";		
	}
	
	if (hasChild) {
		iclassName="class='"+this.arrClassName+"'";
	}
	
	if (!title) title="未知的标题或被移动的节点";
	
	a.title=title;
	 
	
	a.innerHTML="<i "+ iclassName + "></i><span>" + title +"</span>";
	//加入id
	if (id) {
		a.id= this.idTag + id;
		li.id = this.treeNodeIDTag + id;
		li.setAttribute("hasChild", (hasChild?1:0));
	}
	 
    li.appendChild(a);
    
    //如果包含子节点,则添加ul元素
    if (hasChild) {
    	
    	var ul =document.createElement("ul");
    	
    	li.appendChild(ul);
    	 
    }
    
    this.outer.appendChild(li);
    var node     =new termNode();
    node.element = li;
    node.title   = title;
    node.dataId  = id;
    node.Id = this.treeNodeIDTag + id;
    node.hasChild = (hasChild?1:0);
    return node;
};
/**
 * 增加根节点,根节点允许被增加多个,返回dom元素
 * @param id-节点的id,作为节点id的关键值
 * @param title-节点的标题
 * @param methodName-节点触发的js方法名，比如 "open(10)"
 * @returns dom元素
 */
myTree.prototype.addRootNode=function(id,title,hasChild,methodName){
	var node = this.createNode(id,title,hasChild,methodName);
    return node;//返回这个 节点 
    
};
/**
 * 增加子节点,返回dom元素.
 * @param id-节点的id,作为节点id的关键值
 * @param title-节点的标题
 * @param hasChild-是否包含子节点，0：不包含，当前节点属于叶子 1:包含
 * @param methodName-节点触发的js方法名，比如 "open(10)"
 * @returns dom元素
 */
myTree.prototype.addChild=function(pNode,id,title,hasChild,methodName){
    //
	var node = this.createNode(id,title,hasChild,methodName);
    //如果li下包含ul,则ul添加子节点
	var ul = this.getUl(pNode.element);
    if (ul) {
    	ul.appendChild(node.element);
    }else{//否则,就直接添加到li,作为叶子节点
    	pNode.element.appendChild(node.element);
    }
    //返回这个 子节点 
	return node;
};
/**
 * 根据id返回树节点
 * @param id
 * @returns
 */
myTree.prototype.getNode = function(id){
	this.curNode.Id= id;
	this.curNode.dataId= id.substr(this.treeNodeIDTag.length);//去掉开头的标记;
	this.curNode.element = document.getElementById(this.curNode.Id);
	this.curNode.title = this.curNode.element.textContent;
	this.curNode.hasChild = this.curNode.element.getAttribute("hasChild");
	return this.curNode;
};

/**
 * 根据dataId返回树节点(比如,根据外部指定的数据id,直接返回树节点)
 * @param dataId
 * @param isRefresh 是否刷新当前节点,true:从服务器获取最新数据,刷新当前节点 false:不刷新,只从document加载
 * @returns
 */
myTree.prototype.getNodeByDataId = function(dataId,isRefresh){
	var _this=this;
	this.curNode.Id       = this.treeNodeIDTag + dataId;
	this.curNode.dataId   = dataId;
	this.curNode.element  =  document.getElementById(this.curNode.Id);//$("#"+this.curNode.Id).get(0);
	this.curNode.title    = this.curNode.element.innerHTML;
	this.curNode.hasChild = this.curNode.element.getAttribute("hasChild");
	if (isRefresh&&isRefresh==true){
		this.ajaxGet(dolphin.term.action.refreshNodeAction,{termId:dataId},function(json){
			if (json&&json.result){
				if (json.result==1&&json.data){
					$(_this.curNode.element).find("a").title      =json.data.termName;
					$(_this.curNode.element).find("a i").innerHTML=json.data.termName;
					$(_this.curNode.element).find("a span").attr("title",json.data.termName);
					$(_this.curNode.element).find("a span").html(json.data.termName);
					_this.curNode.hasChild = json.data.hasChild;
					_this.curNode.title    = json.data.termName;
					 
				}
			}
		});
	}
	return this.curNode;
};

/**
 * 获取node节点里的ul元素
 * @param node
 * @returns
 */
myTree.prototype.getUl = function(node){
	if (node.hasChildNodes){
		 var childs = node.childNodes;    
		   for(var i = childs.length - 1; i >= 0; i--) {
			   if (childs[i].nodeName.toUpperCase() =='UL'&&childs[i].nodeType==1) {
				  return childs[i]; 
			   }
		   }  
	}
	return null;
};