本文共 7939 字，大约阅读时间需要 26 分钟。
由于DWZ中只能统一的改变图标，这个地方对它进行了修改可以给节点添加对应的icon。使用方法是：
.tree .home_icon {background:url(../images/home.png) no-repeat}
图标是22px*22px的，但是里面真正的占用的是16px*16px居中的。
下面是修改好的dwz.tree.js
修改的地方坐了备注的
/** * @author Roger Wu * @version 1.0 * added extend property oncheck */ (function($){ $.extend($.fn, { jTree:function(options) { var op = $.extend({checkFn:null, selected:"selected", exp:"expandable", coll:"collapsable", firstExp:"first_expandable", firstColl:"first_collapsable", lastExp:"last_expandable", lastColl:"last_collapsable", folderExp:"folder_expandable", folderColl:"folder_collapsable", endExp:"end_expandable", endColl:"end_collapsable",file:"file",ck:"checked", unck:"unchecked"}, options); return this.each(function(){ var $this = $(this); var cnum = $this.children().length; $(">li", $this).each(function(){ var $li = $(this); var first = $li.prev()[0]?false:true; var last = $li.next()[0]?false:true; $li.genTree({ selfIcon:(typeof($li.attr("iconCls"))=="undefined")?'':$li.attr('iconCls'),//自加，用于判断节点是否添加了iconCls icon:$this.hasClass("treeFolder"), ckbox:$this.hasClass("treeCheck"), options: op, level: 0, exp:(cnum>1?(first?op.firstExp:(last?op.lastExp:op.exp)):op.endExp), coll:(cnum>1?(first?op.firstColl:(last?op.lastColl:op.coll)):op.endColl), showSub:(!$this.hasClass("collapse") && ($this.hasClass("expand") || (cnum>1?(first?true:false):true))), isLast:(cnum>1?(last?true:false):true) }); }); setTimeout(function(){ if($this.hasClass("treeCheck")){ var checkFn = eval($this.attr("oncheck")); if(checkFn && $.isFunction(checkFn)) { $("div.ckbox", $this).each(function(){ var ckbox = $(this); ckbox.click(function(){ var checked = $(ckbox).hasClass("checked"); var items = []; if(checked){ var tnode = $(ckbox).parent().parent(); var boxes = $("input", tnode); if(boxes.size() > 1) { $(boxes).each(function(){ items[items.length] = {name:$(this).attr("name"), value:$(this).val(), text:$(this).attr("text")}; }); } else { items = {name:boxes.attr("name"), value:boxes.val(), text:boxes.attr("text")}; } } checkFn({checked:checked, items:items}); }); }); } } $("a", $this).click(function(event){ $("div." + op.selected, $this).removeClass(op.selected); var parent = $(this).parent().addClass(op.selected); $(".ckbox",parent).trigger("click"); event.stopPropagation(); $(document).trigger("click"); if (!$(this).attr("target")) return false; }); },1); }); }, subTree:function(op, level) { return this.each(function(){ $(">li", this).each(function(){ var $this = $(this); var isLast = ($this.next()[0]?false:true); $this.genTree({ selfIcon:(typeof($this.attr("iconCls"))=="undefined")?'file':$this.attr('iconCls'),//自加属性，用于具有父亲节点的节点 icon:op.icon, ckbox:op.ckbox, exp:isLast?op.options.lastExp:op.options.exp, coll:isLast?op.options.lastColl:op.options.coll, options:op.options, level:level, space:isLast?null:op.space, showSub:op.showSub, isLast:isLast }); }); }); }, genTree:function(options) { var op = $.extend({selfIcon:options.selfIcon,icon:options.icon,ckbox:options.ckbox,exp:"", coll:"", showSub:false, level:0, options:null, isLast:false}, options); 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) { node.children(":first").wrap(" "); // 设置class，设置的是具有子节点的node。 var cls = ''; if(op.icon) { if(op.showSub) { if(op.selfIcon != '') {cls = op.selfIcon;} else {cls = op.options.folderColl;} } else { if(op.selfIcon != '') {cls = op.selfIcon;} else {cls = op.options.folderExp} } } $(">div", node).prepend(" "+(op.ckbox ?" ":"")+(op.icon?" ":"")); 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 { // 具有父亲节点的节点的属性，在subTree中已经处理过，这个地方队没有父亲节点的节点做一个补充处理 var cls = ''; if(op.selfIcon == '') { cls = 'file'; } else { cls = op.selfIcon; } node.children().wrap(" "); $(">div", node).prepend(" "+(op.ckbox?" ":"")+(op.icon?" ":"")); addSpace(op.level, node); if(op.isLast)$(node).addClass("last"); } if (op.ckbox) node._check(op); $(">div",node).mouseover(function(){ $(this).addClass("hover"); }).mouseout(function(){ $(this).removeClass("hover"); }); if($.browser.msie) $(">div",node).click(function(){ $("a", this).trigger("click"); return false; }); }); function addSpace(level,node) { if (level > 0) { var parent = node.parent().parent(); var space = !parent.next()[0]?"indent":"line"; var plist = " "; if (level > 1) { var next = $(">div>div", parent).filter(":first"); var prev = ""; while(level > 1){ prev = prev + " "; next = next.next(); level--; } plist = prev + plist; } $(">div", node).prepend(plist); } } }, _check:function(op) { var node = $(this); var ckbox = $(">div>.ckbox", node); var $input = node.find("a"); var tname = $input.attr("tname"), tvalue = $input.attr("tvalue"); var attrs = "text='"+$input.text()+"' "; if (tname) attrs += "name='"+tname+"' "; if (tvalue) attrs += "value='"+tvalue+"' "; ckbox.append("").click(function(){ var cked = ckbox.hasClass("checked"); var aClass = cked?"unchecked":"checked"; var rClass = cked?"checked":"unchecked"; ckbox.removeClass(rClass).removeClass(!cked?"indeterminate":"").addClass(aClass); $("input", ckbox).attr("checked", !cked); $(">ul", node).find("li").each(function(){ var box = $("div.ckbox", this); box.removeClass(rClass).removeClass(!cked?"indeterminate":"").addClass(aClass) .find("input").attr("checked", !cked); }); $(node)._checkParent(); return false; }); var cAttr = $input.attr("checked") || false; if (cAttr) { ckbox.find("input").attr("checked", true); ckbox.removeClass("unchecked").addClass("checked"); $(node)._checkParent(); } }, _checkParent:function(){ if($(this).parent().hasClass("tree")) return; var parent = $(this).parent().parent(); var stree = $(">ul", parent); var ckbox = stree.find(">li>a").size()+stree.find("div.ckbox").size(); var ckboxed = stree.find("div.checked").size(); var aClass = (ckboxed==ckbox?"checked":(ckboxed!=0?"indeterminate":"unchecked")); var rClass = (ckboxed==ckbox?"indeterminate":(ckboxed!=0?"checked":"indeterminate")); $(">div>.ckbox", parent).removeClass("unchecked").removeClass("checked").removeClass(rClass).addClass(aClass); parent._checkParent(); } });})(jQuery); 转载地址：http://cmini.baihongyu.com/