自定义的jquery ui树控件

简单的自定义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 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.maxLevel) {
					this.maxLevel = level;
				}
			};
			
		},
		
		_tree : null,
		
		_initData: function(node, level) {
			if (level>0) {
				node.load();
				for (var i=0; i

这样使用：

 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");

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