sigmatree.js

java script web控件 包含了树 列表 表单的操作

/**
 * @author hexiaodong  email:[e-mail]
 */
function Node(_value,_parent){
	var element = null;
	var imgElement = null;
	var nameElement = null;
	var childrenElement = null;
	var childrenNode = [];
	var sId = null;
	var value = _value;
	var parent = _parent;
	var depth = _parent.getDepth()+1;
	var baseUrl = null;
	
	var oThis = this;

	if(value.children==null){
		value.children = [];
	}

	this.getDepth = function(){
		return depth;
	}

	this.getRoot = function(){
		var current = this;
		var parent = null;
		while(true){
			parent = current.getParent();
			if(parent==null || parent=="undefined"){
				return current;
			}else{
				current = parent;
				parent = null;
			}
		}
	}

	this.getSID = function(){
		return sId;
	}

	this.setSID = function(_sId){
		sId = _sId;
	}

	this.getBaseUrl = function(){
		if(baseUrl==null){
			baseUrl = parent.getBaseUrl();
		}
		return baseUrl;
	}

	this.getParent = function(){
		return parent;
	}

	this.getValue = function(){
		return value;
	}

	this.setValue= function(_value){
		for(key in _value){
			value[key] = _value[key];
		}
		nameElement.innerHTML ="<nobr>" + value["name"] + "</nobr>";
	}

	this.onSelected = function(){
		nameElement.className="selected";
	}

	this.onUnSelected = function(){
		nameElement.className="";
	}
	
	this.changeState = function(){
		if(value.children==null ||value.children.length==0){
			return ;
		}else{
			
			if(value.state=="opened"){
				value.state = "closed";
			}else{
				value.state = "opened";
			}
		}
		oThis.repaint();
	}
	
	this.addChild = function(data){
		var c = this.getValue().children;
		
		data.index = c.length;
		c[data.index] = data;

		if(childrenElement == null){
			value.state = "opened";
			oThis.repaint();
		}else{
			var node = new Node(data,oThis);
			var nodeElement = node.getElement();
			childrenElement.appendChild(nodeElement);
			childrenNode[data.index] = node;
			value.state = "opened";
			oThis.repaint();
		}		
	}

	this.removeChild = function(node){
		childrenElement.removeChild(node.getElement());
		childrenNode.remove(node);
		this.getValue().children.remove(node.getValue());
		this.repaint();
	}
	
	this.repaint = function(){
		if(value.children.length>0){
			if(value.state=="opened"){
				imgElement.src = oThis.getBaseUrl()+"images/opened.gif";
				if(childrenElement==null){
					oThis.paintChildren();
				}else{
					childrenElement.style.display = "";
				}
			}else{
				imgElement.src = oThis.getBaseUrl()+"images/closed.gif";
				if(childrenElement!=null){
					childrenElement.style.display="none";
				}
			}
		}else{
			imgElement.src = oThis.getBaseUrl()+"images/leaf.gif";
		}
	}

	this.getElement = function(){
		if(element==null){
			element = document.createElement("DIV");
			if(this.getParent().getParent()==null){
				element.className = "treeNode";
			}else{
				element.className = "subTreeNode";
			}

			imgElement = document.createElement("img");
			if( value.children.length>0){
				if(value.state=="opened"){
					imgElement.src = oThis.getBaseUrl()+"images/opened.gif";
				}else{
					imgElement.src = oThis.getBaseUrl()+"images/closed.gif";
				}
			}else{
				imgElement.src = oThis.getBaseUrl()+"images/leaf.gif";
			}
			imgElement.onclick = function(){
				oThis.changeState();
			}
			element.appendChild(imgElement);

			nameElement = document.createElement("a");
			nameElement.innerHTML ="<nobr>" + value["name"] + "</nobr>";
			nameElement.href='#';
			nameElement.onclick = function(){
				var root = oThis.getRoot();
				root.setSelectedNode(oThis);
			}
			element.appendChild(nameElement);
			if(value.state=="opened" && value.children.length>0){
				oThis.paintChildren();
			}
		}
		return element;
	}

	this.paintChildren = function(){
		childrenElement = document.createElement("DIV");
		var children = oThis.getValue().children;
		for(var i=0;i<children.length;i++){
			children[i].index = i;
			var child = new Node(children[i],oThis);
			var childElement = child.getElement();
			childrenElement.appendChild(childElement);
			childrenNode[i] = child;
		}
		element.appendChild(childrenElement);
	}
}

function Tree(){
	SigmaBox.call(this);
	var baseUrl = "";
	var childrenNode = [];
	var element = null;
	var oThis = this;
	var selectedNode = null;
	var value = null;

	this.getElement().className = "SigmaTree";

	this.getParent = function(){
		return null;
	}

	this.getDepth = function(){
		return 0;
	}

	this.setBaseUrl = function(url){
		if(url==null){
			url = "";
		}else if(url.charAt(url.length-1)!="/"){
			url = url+"/";
		}
		baseUrl = url;
	}

	this.getBaseUrl = function(){
		return baseUrl;
	}
	
	this.unbindData = function(){
		for(var i=0;i<childrenNode.length;i++){
			var e = childrenNode[i].getElement();
			e.removeNode(true);
		}
		childrenNode = [];
		value = {};
	}

	this.bindData = function(_data){
		oThis.unbindData();

		if(_data==null)
			return;
		else{
			for(var i=0;i<_data.length;i++){
				_data[i].index = i;
				var child = new Node(_data[i],oThis);
				var childElement = child.getElement();
				oThis.getElement().appendChild(childElement);
				childrenNode[i] = child;
			}
		}
		value = _data;
	}

	this.setSelectedNode = function(node){
		if(selectedNode == node){
			selectedNode.onUnSelected();
			selectedNode = null;
			oThis.onNodeChange();
			return;
		}
		if(selectedNode!=null){
			selectedNode.onUnSelected();
		}
		selectedNode = node;
		selectedNode.onSelected();
		oThis.onNodeChange();
	}

	this.getSelectedNode = function(){
		return selectedNode;
	}

	this.onNodeChange = function(){
	}

	this.addChild = function(data){
		value[value.length] = data;
		data.index = value.length;
		var child = new Node(data,oThis);
		var childElement = child.getElement();
		oThis.getElement().appendChild(childElement);
		childrenNode[data.index] = child;
	}

	this.addChildToSelectedNode = function(data){
		var selectednode = this.getSelectedNode();
		if(selectednode==null){
			alert("please select a parent node! ");
			return null;
		}
		var node = selectednode.addChild(data);
		return node;
	}

	this.removeChild = function(node){
		if(node == selectedNode)
			selectednode = null;
		var parent = node.getParent();
		if(parent.getParent()==null){
			oThis.getElement().removeChild(node.getElement());
			childrenNode.remove(node);
			value.remove(node.getValue());
		}else{
			parent.removeChild(node);
		}
	}
}