我借用别人的Jquery做的一个树,现在需求变了,求大神指导下!很拙计啊。。。

_o小怪兽o_ 2012-11-16 03:53:14
没学过JQuery,借用别人的一个 树 ,现在需求是 不管怎么样,每次只能打开一个子节点和一个父节点!求大神指导下,确实搞不懂了!



就如果图片展示的一样 ,每次就只可能有一个节点是打开着的!
...全文
126 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
_o小怪兽o_ 2012-11-16
  • 打赏
  • 举报
回复
说白了 就是用树建立一个二级 菜单 列表!但每次只能打开一个子菜单!
为啥呢 2012-11-16
  • 打赏
  • 举报
回复
应该是节点的expand时遍历所有同级节点,对当前节点外的所有节点执行collapse就可以满足楼主要求了
_o小怪兽o_ 2012-11-16
  • 打赏
  • 举报
回复
上面总共有四张图片,我贴上js代码

function Tree(rootNode) {
	var $ = this;
	this.root = rootNode;
	this.show = function(container) {
		$.update($.root);
		this.root.expand();
		if(container.tagName)
			container.appendChild($.root.container); 
		else if(typeof container == "string") 
			document.getElementById(container).appendChild($.root.container);
	}
	
	this.update = function(parent) {
		parent.indent();
		for (var i = 0; i < parent.children.length; i++) {
			parent.children[i].level = parent.level + 1;
			for (var j = 0; j < parent.ancestor.length; j++) {
				parent.children[i].ancestor.push(parent.ancestor[j]);
			}
			parent.children[i].ancestor.push(parent);
			$.update(parent.children[i]);
		}
	}
}



var currentNode = null;

function TreeNode(text, url, iconOpen, iconOpenHover, iconClosed, iconClosedHover) {
	var $ = this;
	this.level = 0;	
	this.children = [];	
	this.parent = null;	
	this.status = "CLOSED";	
	this.ancestor = [];	
	this.isHover = false;
	
	this.PATH = "images/tree/";
	this.COLLAPSED = this.PATH + "arrow_collapsed.gif";
	this.EXPANDED = this.PATH + "arrow_expanded.gif";
	this.COLLAPSED_HOVER = this.PATH + "arrow_collapsed_hover.gif";
	this.EXPANDED_HOVER = this.PATH + "arrow_expanded_hover.gif";
	this.CATEGORYOPEN = this.PATH + (iconOpen ? iconOpen : "folder_open.gif");
	this.CATEGORYOPEN_HOVER = this.CATEGORYOPEN;
	this.CATEGORYCLOSED = this.PATH + (iconClosed ? iconClosed : "folder_closed.gif");
	this.CATEGORYCLOSED_HOVER = this.CATEGORYCLOSED;
	this.EMPTY = this.PATH + "empty.gif";

	this.container = document.createElement("DIV");
	this.content = document.createElement("DIV");
	this.indentSpace = document.createElement("SPAN");
	this.statusIcon = document.createElement("IMG");
	this.node = document.createElement("SPAN");
	this.nodeIcon = document.createElement("IMG");
	this.label = document.createElement("A");
	this.container.appendChild(this.content);
	this.content.appendChild(this.indentSpace);
	this.content.appendChild(this.statusIcon);
	this.content.appendChild(this.node);
	this.node.appendChild(this.nodeIcon);
	this.node.appendChild(this.label);

	this.container.style.display = "block";
	this.statusIcon.src = this.COLLAPSED;
	this.nodeIcon.src = this.CATEGORYCLOSED;	
	this.nodeIcon.align = "absmiddle";
	this.statusIcon.align = "absmiddle";
	this.statusIcon.style.cursor = "default";
	this.node.style.cursor = "default";
	this.label.style.lineHeight = "20px";
	this.label.style.fontSize = "12px";
	this.label.style.display = "inline-block";
	this.label.style.backgroundImage = "url(" + this.BG + ")";
	this.label.style.backgroundRepeat = "repeat-x";
	this.label.innerHTML = text;
	
	if (url) {
	    this.label.href = url;
	    this.label.target = "mainFrame";
	}

	this.add = function(child) {
		this.container.appendChild(child.container);
		this.children.push(child);
		child.parent = this;
	}
	
	this.remove = function(child) {
		child.container.removeNode(true);
		var temp = [];
		for (var i = 0; i < this.children.length; i++) {
			if (this.children[i] != child) {
				temp.push(this.children[i]);
			} else {
				continue;
			}
		}
		this.children = temp;
	}

	this.hidden = function() {
		this.container.style.display = "none";
	}

	this.show = function() {
		this.container.style.display = "block";
	}

	this.getAncestor = function(level) {
		if (this.level == level)
			return this;
		for (var i = 0; i < $.ancestor.length; i++) {
			if ($.ancestor[i].level == level) {
				return $.ancestor[i];
			}
		}
		return null;
	}
	
	this.contains = function(node) {
		for (var i = 0; i < $.children.length; i++) {
			if ($.children[i] == node) {
				return true;
			}
			$.children[i].contains(node);
		}
		return false;
	}
	
	this.indent = function() {
		this.indentSpace.innerHTML = "";
		for (var i = 0; i < this.level; i++) {
			var indentImg = document.createElement("IMG");
			indentImg.src = this.EMPTY;
			indentImg.align = "absmiddle";
			this.indentSpace.appendChild(indentImg);
		}
		this.collapse();
	}
	
	this.setIcon = function() {
		this.nodeIcon = this.status == "CLOSED" ? 
		($.isHover ? $.CATEGORYCLOSED_HOVER : $.CATEGORYCLOSED) : 
		($.isHover ? $.CATEGORYOPEN_HOVER : $.CATEGORYOPEN);
	}
	
	this.collapse = function() {
		for (var i = 0; $.children && i < $.children.length; i++) {
			$.children[i].hidden();
		}
		$.statusIcon.src = $.COLLAPSED;
		$.nodeIcon.src = $.CATEGORYCLOSED;
		$.status = "CLOSED";
	}
	
	this.expand = function() {
		for (var i = 0; $.children && i < $.children.length; i++) {
			$.children[i].show();
		}
		$.statusIcon.src = $.EXPANDED;			
		$.nodeIcon.src = $.CATEGORYOPEN;
		$.status = "OPEN";
	}
	
	this.expandOrCollapse = function() {
		if ($.status == "CLOSED") {
			if (currentNode) {
				var ancestor = currentNode.getAncestor(1);
				var myAncestor = $.getAncestor(1);
				if (ancestor && myAncestor && ancestor != myAncestor) {
					ancestor.collapse();
				}
			}
			currentNode = $;
			$.expand();
		} else {
			$.collapse();
		}
	}

	this.node.onmousedown = function() {
		if (currentNode) {
			currentNode.nodeIcon.src = (currentNode.status == "CLOSED" ? currentNode.CATEGORYCLOSED : currentNode.CATEGORYOPEN);
		}
	}
	
	this.node.onmouseup = function() {
		if (event.button == 2) {
			
		}
	}
	
	this.content.onselectstart = function() {
		return false;	
	}

	this.statusIcon.onclick = this.expandOrCollapse;
	this.nodeIcon.ondblclick = this.expandOrCollapse;
	this.label.onclick = this.expandOrCollapse;
	
	this.statusIcon.onmouseover = function() {
		this.src = $.status == "CLOSED" ? $.COLLAPSED_HOVER : $.EXPANDED_HOVER;
	}
	
	this.statusIcon.onmouseout = function() {
		this.src = $.status == "CLOSED" ? $.COLLAPSED : $.EXPANDED;
	}
}



81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧