JS Tree

citi21558541
浏览: 79214 次
性别:
来自: 上海
最近访客更多访客>>

OKMAN2009
y88
mxiaoyao
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="st/css/style.css" />
</head>

<body>


				<div class="left_nav_content" id="tree">
					<dl>
						<dt class="folder_title">
							<img alt="" src="st/img/expand_all.gif" /> 
							<span>Project 01</dt>
						<dd class="folder_content">
						<dl>
							<dt class="folder_title">
							<img alt="" src="st/img/expand_all.gif" /> common</dt>
							<dd class="folder_content">
							<dl>
								<dt class="folder_title">
								<img alt="" src="st/img/expand_all.gif" /> css</dt>
								<dd class="folder_content">
								<dl>
									<dt class="endnode">
									<img alt="" src="st/img/endnode.png" /> style.css</dt>
								</dl>
								</dd>
							</dl>
							<dl>
								<dt class="folder_title">
								<img alt="" src="st/img/expand_all.gif" /> img</dt>
								<dd class="folder_content">
								<dl>
									<dt class="endnode">
									<img alt="" src="st/img/endnode.png" /> blank.png</dt>
								</dl>
								</dd>
							</dl>
							<dl>
								<dt class="folder_title">
								<img alt="" src="st/img/expand_all.gif" /> js</dt>
								<dd class="folder_content">
								<dl>
									<dt class="endnode">
									<img alt="" src="st/img/endnode.png" /> jmin.js</dt>
								</dl>
								</dd>
							</dl>
							</dd>
							<dt class="endnode">
							<img alt="" src="st/img/endnode.png" /> index.htm</dt>
						</dl>
						</dd>
					</dl>
				</div>
<script type="text/javascript" src="st/js/mm.js"></script>
<script type="text/javascript">

function getEvent(){
     if(window.event)    {return window.event;}
     func=getEvent.caller;
     while(func!=null){
         var arg0=func.arguments[0];
         if(arg0){
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent
                || arg0.constructor==KeyboardEvent)
                ||(typeof(arg0)=="object" && arg0.preventDefault
                && arg0.stopPropagation)){
                 return arg0;
             }
         }
         func=func.caller;
     }
     return null;
}
	//判断数据类型
	function isNull(a){    return a === null;}
	function isUndefined(a){    return a === undefined;}
	function isNumber(a){    return typeof a === 'number';}
	function isString(a){    return ('string'==typeof a||'object'==typeof a)&&a.constructor==String;}
	function isBoolean(a){    return typeof a === 'boolean';}
	function isDate(a){ return (typeof a=='object')&&a.constructor==Date; } 
	function isArray(a){    return Object.prototype.toString.apply(a) === '[object Array]';}
	function isFunction(a){    return Object.prototype.toString.call(a) === '[object Function]';}
	function isWindow(o){    return o && typeof o === 'object' && 'setInterval' in o;}
	function isHTMLElement(a){var d = document.createElement("div");try{d.appendChild(a.cloneNode(true));return a.nodeType==1 ? true : false;}catch(e){return a==window || a==document;}}



var Tree = new Module({    
    id:"leftTree",    
    init:function(){    
        this.element = DOM.getElementById(this.id);    
        this.element.onclick=function(){    
            ModuleA.addEventListener('onclick A');    
            ModuleA.fireEvent('onclick A',[ModuleA]);    
        };    
        this.addEventListener('onclick A');    
    }    
});  
window.onload=function(){    
    MM.init([ModuleA]);    
    //ModuleA.init();    
}


var TreeView =function(params){
	if(!params) return null;
	
	var self = this;
	this.id = params.id;
	this.element = this.childContainer = params.element;
	this.className = params.className;
	
	this.childNodes=[];
	this.selectedNode = null;
	this.childData = params.childData;
	params.root = self;
	
	
	this.initialize = function(){
		if(self.childData.length>0){
			for(var i in self.childData){
				self.childData[i].root = params.root;
				self.childData[i].parent = self;
				self.childNodes.push(new TreeNode(self.childData[i]));
			}
		}
		
	}
	
	this.insertChild = function(params){
		if(!params) return null;
		params.nodeType="project";
		self.childNodes.push(new TreeNode(params));
	}
	
	oElem = this.element;
	if(oElem.addEventListener==undefined && !!oElem.attachEvent){
		oElem.addEventListener=function(type,fn,sign){
			if(!isFunction(fn) && isString(fn)) fn=new Function(fn);
			if(!!isFunction(fn)) oElem.attachEvent("on"+type,fn);
		};
	}
	
	function operate(){
		var e = getEvent();
		var src = e.srcElement||e.target;
		var treeNode = src.treeNode;
		while(!treeNode){
			if(src.tagName=="DT"||src.tagName=="dt"||src.tagName=="BODY"||src.tagName=="BODY") break;
			src = src.parentNode;
		}
		if(!!treeNode){
			treeNode.root.selectedNode = treeNode
			if(treeNode.expanded){
				treeNode.expanded=false;
				treeNode.collapse();
			}
		  else{
		  	treeNode.expanded=true;
		  	treeNode.expand();
		  }
		}
	}
	
	oElem.addEventListener('click',operate,false);

	this.initialize();
	
}

var TreeNode = function(params){
	if(!params) return null;
	
	var self = this;
	//create DOM
	var dl = document.createElement("DL");
	var dt = document.createElement("DT");
	var dd = document.createElement("DD");
	
	dl.treeNode = this;
	dt.treeNode = this;
	dd.treeNode = this;
	
	dt.innerHTML = params.title;
	dt.className = params.root.className[params.nodeType]['collapse'];
	
	dd.style.display = "none";
	
	dl.appendChild(dt);
	dl.appendChild(dd);
	
	//set property
	this.element = dl;
	this.title = dt;
	this.childContainer = dd;
	
	this.id = params.id;
	this.nodeType = params.nodeType;
	this.childNodes = [];
	this.parent = params.parent;
	this.childData = params.childData;
	
	this.root = params.root;
	
	this.expanded = false;
	
	//set method
	this.initialize = function(){
		
		self.parent.childContainer.appendChild(self.element);
		
		if(!!self.childData&&self.childData.length>0){
			for(var i in self.childData){
				params.childData[i].root = params.root;
				params.childData[i].parent = self;
				self.childNodes.push(new TreeNode(params.childData[i]));
			}
		}
		
	}
	
	this.expand = function(){
		self.title.className=self.root.className[self.nodeType]['expand'];
		if(self.childNodes.length>0)
		self.childContainer.style.display="block";
	}
	this.collapse = function(){
		self.title.className=self.root.className[self.nodeType]['collapse'];
		self.childContainer.style.display="none";
	}
	
	this.insertChild = function(params){
		if(!params) return null;
		self.childNodes.push(new TreeNode(params));
	}
	
	this.expandAll = function(){
		self.expand();
		if(self.childNodes.length>0){
			for(var i in self.childNodes){
				self.childNodes[i].expandAll();
			}
		}
	}
	this.collapseAll = function(){
		self.collapse();
		if(self.childNodes.length>0){
			for(var i in self.childNodes){
				self.childNodes[i].collapseAll();
			}
		}
	}
	
	this.initialize();
	
}



window.onload = function(){
	var leftTree = new TreeView({
		id:"Tree"+(new Date()).getTime()+Math.random(),
		element:document.getElementById('leftTree'),
		childData:[
			{id:'idx1',title:'Project01',nodeType:'project',childData:[
				{id:'idx3',title:'st',nodeType:'folder',childData:[
					{id:'idx4',title:'blank.txt',nodeType:'file'}
				]}
			]},
			{id:'idx2',title:'project02',nodeType:'project',childData:[]}
		],
		className:{
			project:{
				expand:'project_expand',
				collapse:'project_collapse'
			},
			folder:{
				expand:'folder_expand',
				collapse:'folder_collapse'
			},
			file:{
				expand:'file_expand',
				collapse:'file_collapse'
			}
		}
		
	});
}
</script>

<div id="leftTree">
</div>
</body>
png ->htm


 

</html>