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對象
}
此解決方式後續再完善，封裝爲通用版。

前段效果圖：