DWZ整合zTree（实现版）

1.准备工作：
        Dwz 1.4.6
        ZTree 3.5.15
        Jquery 1.7.2
2.工程视图


 
3. 整合步骤
3.1.CSS替换：
      找到DWZ中的core.css 文件，注释tree样式；将zTree中的样式文件css/zTreeStyle/zTreeStyle.css内容拷贝至core.css中，最好是文件追加；并将zTree中图标资源文件夹[ztree\css\zTreeStyle\img]拷贝DWZ的themes\css目录。如图：


 

3.2：Js脚本修改：
Dwz.ui.js注释initUI函数中以下代码段：
//$("ul.tree", $p).jTree();

jquery.ztree.core-3.5.js有多次需要修改，按如下步骤调整：
makeDOMNodeNameBefore函数：
    if (node.rel) {
    //alert(node.name+".rel="+node.rel);
   html.push(" rel='", node.rel,"'");
    }

makeNodeTarget函数修改：
return (node.target || "navTab");


添加setNodeRel函数：
setNodeRel: function(setting, node) {
    var aObj = $("#" + node.tId + consts.id.A),
    rel = treeNode.rel;
    if (rel == null || rel.length == 0) {
    aObj.removeAttr("rel");
    } else {
    aObj.attr("rel", rel);
    }
    }

updateNode函数调用setNodeRel函数
view.setNodeRel(setting, node);

4.前端应用
页面引用jquery.ztree.core-3.5.js；

Js代码段：

<SCRIPT type="text/javascript">
	<!--
	var setting = {	
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onExpand: zTreeRegisterTarget
		}
	};
	var zNodes = [{  id : 0,  
				pId : -1,  
				   name : "搜索",  
				    url : "demo/w_alert.html",  
				    target : "navTab",  
				    rel : "sl",
				    open:true,  //设置true就子节点无任何问题
				    children:[{  
					    id : 1,  
					    pId : 0,  
					    name : "百度",  
					    url : "demo/w_panel.html",  
					    target : "navTab",  
					    rel : "bd",
					    //open:true,
					    children:[{  
						    id : 1,  
						    pId : 0,  
						    name : "文库",  
						    url : "demo/w_tabs.html",  
						    target : "navTab",  
						    rel : "wk"  
					    }, {  
						    id : 2,  
						    pId : 0,  
						    name : "地图",  
						    url : "demo/w_dialog.html",  
						    target : "navTab",  
						    rel : "dt"  
					    } ]  
				    }, {  
					    id : 2,  
					    pId : 0,  
					    name : "Google",  
					    url : "http://www.google.com.cn",  
					    target : "navTab",  
					    rel : "gg"  
				    } ]},{
				    	id : -2,  
					    pId : -1,  
					    name : "门户",  
					    url : "http://www.sina.com.cn",  
					    target : "navTab",  
					    rel : "xl"  
				    }];  
	function zTreeRegisterTarget(event, treeId, treeNode) {
   		initUI($('#'+treeId));
	}
		
	$(document).ready(function(){
		$.fn.zTree.init($("#ztreedemo"), setting, zNodes);
	});
	//-->
</SCRIPT>

 

 

Html代码段：

<div class="accordionHeader">
<h2><span>Folder</span>ZTree整合</h2>
</div>
<div class="accordionContent">
<ul id="ztreedemo" class="tree"></ul>
</div>

 


在实际调试中遇到点击子节点依然在新窗口中弹出问题：
若Json对象中的父节点没有设置open=true时，在前段点击是能正常展开，但是点击子节点时，不是按照target=navTab方式弹出页面，而是新窗口弹出。
Firebug后发现生成的html没有任何问题，而是没有重新加载样式；为了解决此问题可以在展开后调用initUI方法，使用onExpand方法实现，主要代码如下：
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onExpand: zTreeRegisterTarget
}
};

function zTreeRegisterTarget(event, treeId, treeNode) {
   initUI($('#'+treeId));//可直接调用initUI()；但考虑性能则直接找到tree的DOM对象
}
此解决方式后续再完善，封装为通用版。

前段效果图：

 

 

 

评论

10 楼 daishy 2015-07-29  

楼主还在不在。。。。   求demo,邮箱[e-mail]
万分感谢

9 楼 xiaosheng_papa 2015-05-04  

楼主还在不在。。。。   求demo,邮箱[e-mail]

8 楼 xiaosheng_papa 2015-05-04  

这上面有点不详细，跟着步奏不行啊，可否来分demo，3Q。。。。

7 楼 wagy0226 2015-01-02  

能否提供一个demo,谢谢[e-mail]

6 楼 咫尺千山路 2014-10-20  

求demo一份，万分感谢！    [e-mail]

5 楼 306085175 2014-07-18  

来份demo 楼主 [e-mail]

4 楼 caoyamou 2014-05-13  

按照你的方法进行修改，有问题啊，能否提供份demo呢?谢谢[e-mail]

3 楼 王雷震 2014-01-11  

<ul id="ztreedemo" class="tree"></ul>   修改为 <ul id="ztreedemo" class="ztree"></ul> 

2 楼 王雷震 2014-01-11  

我按照你的整合为什么树的图标不出来

1 楼 hlzds2008 2013-12-20  

能否提供一份Demo,邮件:[e-mail]