自定义的jquery ui树控件

页面导航:首页 > 网络编程 > JavaScript > 自定义的jquery ui树控件

自定义的jquery ui树控件

来源: 作者: 时间:2016-01-19 18:32 【

简单的自定义jquery ui树控件,用于机构人员,支持自动加载下级节点数据jQuery widget(xway Tree, {_Node: function(data) {this id = data type + _ +data id;this trid = tr_ + this id;

简单的自定义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);

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

\ \

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<