自定义的jquery ui树控件

标签：jquery ui   tree   控件   

简单的自定义jquery ui树控件，用于机构人员，支持自动加载下级节点数据

	jQuery.widget("xway.Tree", {
		
		_Node: function(data) {

			this.id = data.type + "_" +data.id;
			this.trid = "tr_" + this.id;
			this.label = data.label;
			this.parent = null;

			this.tree = null;
			this.children = new Array();

			this.type = data.type;
			this.level = 1;
			this.loaded = data.type == 'user' ? true : false;
			this.expand = false;
			this.data = data;
			
			this.table = null;
			this.tr = null;
			
			this.getData = function() {
				return this.data;
			};
			
			this.add = function(node) {
				this.children.push(node);
				this.loaded = true;
				this.expand = true;
				
				node.parent = this;
				node.tree = this.tree;
				node.table = this.table;
				node.level = this.level + 1;
				
				this.tree.setMaxLevel(node.level);
				return this;
			};

			this.getLeftBrother = function() {
				if (this.parent == null) {
					return null;
				}
				
				for (var i=0; i<this.parent.children.length; i++) {
					var n = this.parent.children[i];
					if (n == this) {
						if (i == 0) {
							return this.parent;
						}
						else {
							var last_child = this.parent.children[i-1];
							while (last_child.children.length > 0) {
								last_child = last_child.children.last();
							}
							return last_child;
						}
					}
				}
				
			};
			
			this.isLastBrother = function() {
				if (this.parent == null) {
					return true;
				}
				var n = this.parent.children.length;
				if (this == this.parent.children[n-1]) {
					return true;
				}
				return false;
			};

			this.toHtml = function() {
				var leftBrother = this.getLeftBrother() ;
				var cur_index = (leftBrother == null ? 0 : leftBrother.tr.rowIndex + 1);
				this.tr = this.table.insertRow(cur_index);
				this.tr.id = this.trid;
				this.GetHtml(this.tr);
				return this.tr;
			};
			
			this.GetHtml = function(tr) {
				var max = this.tree.maxLevel;
				
				var stack = new Array();
				var p = this.parent;
				
				if (p != null) {
					while ( p != null) {
						stack.push(p);
						p = p.parent;
					}
					
					while (stack.length > 0) {
						var node = stack.pop();
						var td = document.createElement("td");
						td.className = "PrefixTD";
						tr.appendChild(td);
					}
				}

				tr.appendChild(this.GetLineNodeIconTD());
				tr.appendChild(this.GetNodeIconTD());
				
				var td = tr.insertCell();
				td.colSpan = max- this.level + 1;
				var text = document.createTextNode( this.label);
				td.appendChild(text);
				
				for (var i=0; i<this.children.length; i++) {
					this.children[i].toHtml();
				}
				return tr;
			};
			
			this.GetLineNodeIconTD = function() {
				var last = this.isLastBrother();
				var td = document.createElement("td");
				td.id = "td_linenode_" + this.id;
				
				if (last == null) {
					return td;
				}
				
				if (this.type == 'user') {
					td.className = "noneTD"; 
					return td;
				}
				if (this.type == 'org') {
					return td;
				}
				
				if (this.loaded == true) {
					td.className = this.expand ? "minusTD" : "plusTD";
				}
				else {
					td.className = "plusTD";
				}
				
				var node = this;
				td.addEventListener("click" , function() {
					node.toggle();
				});
				return td;
			};
			
			this.GetNodeIconTD = function() {
				var td = document.createElement("td"); 

				if (this.type == 'org') {
					td.className = "OrgNode";
				}
				else if (this.type == 'department') {
					td.className = "DepartmentNode";
				}
				else if (this.type == 'user') {
					td.className = "UserNode";
				}

				return td;
			};
			
			this.setVisible = function(bool) {
				this.expand = false;
				if (this.type == "department") {
					this.toggleIcon();
				}
				
				document.getElementById(this.trid).style.display = ( bool ? "" : "none");
				if (bool == false) {
					for (var i=0; i<this.children.length; i++) {
						this.children[i].setVisible(bool);
					}
				}
			};
			
			this.updateTextColSpan = function() {
				var txtTD = this.tr.cells[this.tr.cells.length-1];
				txtTD.colSpan = txtTD.colSpan+1;
				
				for (var i=0; i<this.children.length; i++) {
					this.children[i].updateTextColSpan();
				}
			};
			
			this.load = function() {
				this.loaded = true;
				var p = this.type == 'org' ? {orgid : this.data.id} : {departmentid : this.data.id};
				
				var node = this;
				
				jQuery.getJSON(this.tree.link, p, function(json) {

					for (var i=0; i<json.length; i++) {
						var d = json[i];
						var n = node.tree.widget.newNode(d);
						node.add(n);
						n.toHtml();
					}
					
					node.tree.Root.updateTextColSpan();
				});

			};

			this.toggleIcon = function() {
				var LineNode = document.getElementById("td_linenode_" + this.id);
				LineNode.className = this.expand ? "minusTD" : "plusTD";
			};
			
			this.toggle = function() {
			
				if (this.loaded) {
					this.expand = !this.expand;
					this.toggleIcon();
					for (var i=0; i<this.children.length; i++) {
						var c = this.children[i];
						c.setVisible(this.expand);
					}
				}
				else {
					this.expand = true;
					this.toggleIcon();
					this.load();
				}
			};
			
			
		},

		_Tree : function(widget, _id) {
			
			this.widget = widget;
			this.id = _id;
			this.maxLevel = 0;
			
			this.link = widget.options.link;
			this.OrgFunction = widget.options.OrgFunction;
			this.DepartmentFunction = widget.options.DepartmentFunction;
			this.UsreFunction = widget.options.UsreFunction;
			
			var table = document.createElement("table");
			table.setAttribute("style", "border-collapse: collapse;border-spacing: 0; border:1;width:100%");
			document.getElementById(_id).appendChild(table);
			
			this.Root = null;
			
			this.root = function(data) {
				this.Root = this.widget.newNode(data);
				this.Root.tree = this;
				this.Root.table = table;
				return this.Root;
			};
			
			this.toHtml = function() {
				this.Root.toHtml();
			};
			
			this.setMaxLevel = function(level) {
				if (level > this.maxLevel) {
					this.maxLevel = level;
				}
			};
			
		},
		
		_tree : null,
		
		_initData: function(node, level) {
			if (level>0) {
				node.load();
				for (var i=0; i<node.children.length; i++) {
					_initData(node.children[i], level - 1);
				}
			}
		},
		
		newRoot: function(data) {
			return this._tree.root(data);		
		},
		
		getRoot: function() {
			return this._tree.Root;
		},
		
		getTree: function() {
			return this._tree;
		},
		
		newNode: function(data) {
			return new this._Node(data);
		},
		
		display: function() {
			this._tree.toHtml();
			
			this._initData(this._tree.Root, this.options.AutoLoadLevel);
		},
		
		options: {
			link: null,
			OrgFunction: null,
			DepartmentFunction: null,
			UsreFunction: null,
			AutoLoadLevel: 1
		},
		
		_create: function() {
			this._tree = new this._Tree(this, this.element[0].id);
		},
		
		_init: function() {
		},
		
		_destroy: function() {
		},	

		_setOption: function( key, value ) {
			this._superApply( arguments );
	     }

	});

这样使用：

 jQuery("#orgtree").Tree({link: ‘ListTree.do‘, AutoLoadLevel: 1});
 var root = jQuery("#orgtree").Tree(‘newRoot‘, {label:‘${user.department.org.name}‘ , type: ‘org‘, id: ${user.department.org.orgid} });
  jQuery("#orgtree").Tree("display");

显示效果如图： 展开前，点击+，自动加载下层节点，并展开

自定义的jquery ui树控件

标签：jquery ui   tree   控件   

原文地址：http://blog.csdn.net/vcshcn/article/details/47180227