JS组件--Tree

function MyTree(cnt) {
	this.imgPath = "images/treeimg/";
	this.setRoot(new Node(-1, "root", ""));
	cnt = document.getElementById(cnt);
	//cnt.style.width = 210;
	//cnt.style.height = 350;
	cnt.style.fontSize = "12px";
	//cnt.style.borderStyle = "solid";
	//cnt.style.borderColor = "#ccc";
	//cnt.style.borderWidth = "1px 1px 1px 1px";
	//cnt.style.overflowY = "scroll";
	this.container = cnt;
}


MyTree.prototype = {
	setRoot:function (root) {
		this.root = root;
		this.root.icon = this.imgPath + "base.gif";
	}, 
	render:function () {
		this.root.render();
		this.container.appendChild(this.root.box);
		var ns = this.root.child;
		for (var k = 0; k < ns.length; k++) {
			ns[k].render();
			this.container.appendChild(ns[k].box);
			this.container.appendChild(ns[k].subbox);
		}
	}
};

function Node(id, text, href) {
	this.imgPath = "images/treeimg/";
	this.target = "cntFrm";
	this.child = [];
	this.id = id;
	this.text = text;
	this.icon = this.imgPath + "file.gif";
	this.href = href;
	this.leaf = true;
	this.last = true;
	this.parent = null;
	this.level = 0;
	this.box = document.createElement("div");
	this.subbox = document.createElement("div");
	this.state = 1;
}

Node.prototype = {
	render : function () {
		this.setIndent();
		this.setIcon();
		//this.setChk();
		this.setText();
	},
	add : function (id, text, icon, href) {
		var node = new Node(id, text, icon, href);
		this.leaf = false;
		this.icon = this.imgPath + "foldericon.gif";
		node.parent = this;
		if (node.parent.child.length != 0) {
			node.parent.child[node.parent.child.length - 1].last = false;
		}
		node.level = this.level + 1;
		this.child.push(node);
		return node;
	},
	getNoLineNum : function () {
		var count = 0;
		var p = this.parent;
		while (p && p.last) {
			count++;
			p = p.parent;
		}
		return count;
	},
	setIcon : function () {
		var icon = document.createElement("image");
		icon.setAttribute("align", "top");
		icon.src = this.icon;
		this.box.appendChild(icon);
	},
	setText : function () {
		var span = document.createElement("span");
		var text = document.createTextNode(this.text);
		if (this.leaf) {
			var href = this.href;
			span.attachEvent("onclick", function (e) {
				var sender = window.event.srcElement;
				Ajax(href, null, function(res){
					//var div = document.getElementById("mm");
					//mm.innerHTML = res.responseText;
				});
			});
		}
		span.appendChild(text);
		this.box.appendChild(span);
	},
	setChk : function () {
		var chk = document.createElement("input");
		chk.setAttribute("type", "checkbox");
		chk.style.margin = '0 0 0 0';
		this.box.appendChild(chk);
	},
	getPM : function () {
		var pm = "L1.gif";
		if (this.leaf) {
			pm = this.last ? "L1.gif" : "T1.gif";
		} else {
			if (this.state == 0) {
				if (this.last) {
					pm = "Lplus1.gif";
				} else {
					pm = "Tplus1.gif";
				}
			} else {
				if (this.last) {
					pm = "Lminus1.gif";
				} else {
					pm = "Tminus1.gif";
				}
			}
		}
		return pm;
	},
	setIndent : function () {
		var count = this.getNoLineNum();
		var indent = document.createElement("span");
		for (var i = 1; i <= this.level; i++) {
			var blank = document.createElement("span");
			blank.style.width = 18;
			if (i > 1 && i <= this.level - count) {
				blank.style.backgroundImage = "url(" + this.imgPath + "I1.gif)";
			}
			indent.appendChild(blank);
		}
		if (this.level > 0) {
			var t = document.createElement("image");
			t.setAttribute("align", "top");
			t.setAttribute("id", "img" + this.id);
			t.src = this.imgPath + this.getPM();
			var kk = this;
			var cs = kk.child;
			for (var k = 0; k < cs.length; k++) {
				cs[k].render();
				kk.subbox.appendChild(cs[k].box);
				kk.subbox.appendChild(cs[k].subbox);
			}
			kk.subbox.style.display = (this.state==0)?"none":"block";
			t.attachEvent("onclick", function (e) {
				var sender = window.event.srcElement;
				if (kk.state == 0) {
					kk.state = 1;
					sender.src = kk.imgPath + kk.getPM();
					kk.subbox.style.display = "block";
				} else {
					kk.state = 0;
					sender.src = kk.imgPath + kk.getPM();
					kk.subbox.style.display = "none";
				}
			});
			indent.appendChild(t);
		}
		this.box.appendChild(indent);
	}
};