老手网

给DWZ(JUI)的tree增加icon

分类:javascript 作者:oldhand 来源: 发布:2013-05-23 21:17:06
DWZ(JUI)的树控件,已经很完美了,能应付很多需要
但他的图标很单一,不能自行控制,
这样,在实际应用中肯定不行的,
这里给出我的修改方案,先展示修改后的效果
\

ICON的控制很简单,只需要在li上定义icon的图径
如:<li icon="/images/icons/xxxx.png"><a href="#" target="navTab" rel="test">test</a></li>
代码需要修改dwz.tree.js文件,需要在105行与135行增加些代码:

			return this.each(function(){
				var node = $(this);
				var tree = $(">ul", node);
				var parent = node.parent().prev();
				var checked = 'unchecked';
				if(op.ckbox) {
					if($(">.checked",parent).size() > 0) checked = 'checked';
				}
				if (tree.size()>0) {
					var icon = node.attr("icon");
					if (icon == undefined)
					{
						var filestyle = "";
					}
					else
					{
					    var filestyle = "style=\"background: url("+icon+") no-repeat center transparent;\"";
					}
					node.children(":first").wrap("<div></div>");
					$(">div", node).prepend("<div class='" + (op.showSub ? op.coll : op.exp) + "'></div>"+(op.ckbox ?"<div class='ckbox " + checked + "'></div>":"")+(op.icon?"<div "+filestyle+" class='"+ (op.showSub ? op.options.folderColl : op.options.folderExp) +"'></div>":""));
					op.showSub ? tree.show() : tree.hide();
					$(">div>div:first,>div>a", node).click(function(){
						var $fnode = $(">li:first",tree);
						if($fnode.children(":first").isTag('a')) tree.subTree(op, op.level + 1);
						var $this = $(this);
						var isA = $this.isTag('a');
						var $this = isA?$(">div>div", node).eq(op.level):$this;
						if (!isA || tree.is(":hidden")) {
							$this.toggleClass(op.exp).toggleClass(op.coll);
							if (op.icon) {
								$(">div>div:last", node).toggleClass(op.options.folderExp).toggleClass(op.options.folderColl);
							}
						}
						(tree.is(":hidden"))?tree.slideDown("fast"):(isA?"":tree.slideUp("fast"));
						return false;
					});
					addSpace(op.level, node);
					if(op.showSub) tree.subTree(op, op.level + 1);
				} else {
					var icon = node.attr("icon");
					if (icon == undefined)
					{
						var filestyle = "";
					}
					else
					{
					    var filestyle = "style=\"background: url("+icon+") no-repeat center transparent;\"";
					}
					node.children().wrap("<div></div>");			
					$(">div", node).prepend("<div class='node'></div>"+(op.ckbox?"<div class='ckbox "+checked+"'></div>":"")+(op.icon?"<div class='file' " + filestyle +"></div>":""));
					addSpace(op.level, node);
					if(op.isLast)$(node).addClass("last");
				}


-
分享到:

Copyright © 2012 - 2014 oldhand.cn All Rights Reserved. 粤ICP备13025864号