TreeTable의 간단한 실현

최종 효과도: UI 설명: 테이블 자체에 대한 강화된tree 테이블 구성 요소.tree의 데이터 출처는 칸 안의 a 요소의 사용자 정의 속성: level과 type입니다.구체적인 코드는 다음과 같습니다.

  

  		
Department
EmployeeID
position
	
  
  

		
Dept4
-
-
		
fanggw
c3025
MASTER
		
team1
-
-
		
zhanghy
c3268
SE
		
chenf
c3401
SE
   

상기 데이터 원본 구조에 따라 이 테이블을 두루 훑어보고 데이터를 읽고 전체 트리의 데이터 모델을 구축한 다음에 전체 트리의 보기(node와leaf의 디스플레이는 css 스타일로 정의되어 있어 수정하기 편리하며 필요할 때 외부 코드로 지정)와 관련 노드의 클릭 처리 프로그램을 초기화합니다.다음은 주요 구현 코드입니다.

		
		var Class = {
		  create: function() {
		    return function() {
		      this.initialize.apply(this, arguments);
		    }
		  }
		}
    
    var Node = Class.create();
    Node.prototype = {
    	initialize: function(link, level, type) {
    		this.name = link.innerText;      
			  this.id;
			  this.link = link;
			  this.type = type;
			  this.level = level;	
			  this.isOpen = true;
			  this.isClicked = false;
			  this.root;
			  this.img;	//clicked img's path

				this.parent;
			  this.children = new Array();
			  this.getChildren();
			  
    	},
    	
    	getChildren: function() {
    		if (this.type == "node") {
    			//alert(this.link.innerText);
	    		var dataRows = document.getElementById("treeGrid").getElementsByTagName("TBODY")[0].getElementsByTagName("TR");
	    		var pushFlag = false;
	    		
	    		for(var j=0; j0; lvl--) {
	    		var indentImg = document.createElement("img");
	    		
	    		//get parent node by level
	    		var parentNode = this.parent;
	    		for (var i=1; i 0) {
    					if (this.getNext()) {
    						path = "./images/Tminus.gif";
    					} else {
    						path = "./images/Lminus.gif";
    					}
    				}
    				else {
    					if (this.getNext()) {
    						path = "./images/T.gif";
    					} else {
    						path = "./images/L.gif";
    					}
    				}
    			}    			
    		} else {
  				if (this.getNext()) {
  					path = "./images/T.gif";
  				}
  				else {
  					path = "./images/L.gif";
  				} 
    		}
    		img.src = path;
			  img.align = "absbottom";
			  //set cursor pointer style to the minus/plus img
			  img.style.cursor = "pointer"
			  this.img = img;
			  img.onclick = expand;
			  
			  oFragment.appendChild(img);
			  oFragment.appendChild(this.link);
			  
			  var div = document.createElement("div");
			  div.setAttribute("id", this.id);

			  /* div css class set by type */
			  div.className = (this.type=="node")?"node":"leaf"; 
			  
			  /* all node is margin to left by 10 pixel except root */
			  if (this.level > 0) {
				  div.style.marginLeft = "10px";
			  }
			  
				div.appendChild(oFragment);
				return div;
    		
    	}
    }
    
    /* global variable */
    //tree root
    var root;
    //all nodes of the tree
    var nodes = new Array();
    
    /* initialize the whole tree grid */
    function initTreeGrid() {
		  //dataRows is the datasource of the tree
			var dataRows = document.getElementById("treeGrid").getElementsByTagName("TBODY")[0].getElementsByTagName("TR");
    	
    	//find the root of the tree
    		for (var i=0; i 0) {
    				initNodes(node.children[j]);
    			}
    		}
    }
    
    /* expand row elements by isOpen flag */
    function expand() {    	
    	var currentDivId = event.srcElement.parentNode.id;
    	var currentNode;
    	
    	//get the clicked node
    	for(var i=0; i

이 구성 요소는 IE6+, Firefox에서 테스트를 통과했습니다.관심 있는 친구는 나에게 연락해서 진일보한 개선과 확장을 진행할 수 있다.