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");


在updateNode方法上方添加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代码段：

Js代码  

1. <SCRIPT type="text/javascript">  
2.     <!--  
3.     var setting = {   
4.         data: {  
5.             simpleData: {  
6.                 enable: true  
7.             }  
8.         },  
9.         callback: {  
10.             onExpand: zTreeRegisterTarget  
11.         }  
12.     };  
13.     var zNodes = [{  id : 0,    
14.                 pId : -1,    
15.                    name : "搜索",    
16.                     url : "demo/w_alert.html",    
17.                     target : "navTab",    
18.                     rel : "sl",  
19.                     open:true,  //设置true就子节点无任何问题  
20.                     children:[{    
21.                         id : 1,    
22.                         pId : 0,    
23.                         name : "百度",    
24.                         url : "demo/w_panel.html",    
25.                         target : "navTab",    
26.                         rel : "bd",  
27.                         //open:true,  
28.                         children:[{    
29.                             id : 1,    
30.                             pId : 0,    
31.                             name : "文库",    
32.                             url : "demo/w_tabs.html",    
33.                             target : "navTab",    
34.                             rel : "wk"    
35.                         }, {    
36.                             id : 2,    
37.                             pId : 0,    
38.                             name : "地图",    
39.                             url : "demo/w_dialog.html",    
40.                             target : "navTab",    
41.                             rel : "dt"    
42.                         } ]    
43.                     }, {    
44.                         id : 2,    
45.                         pId : 0,    
46.                         name : "Google",    
47.                         url : "http://www.google.com.cn",    
48.                         target : "navTab",    
49.                         rel : "gg"    
50.                     } ]},{  
51.                         id : -2,    
52.                         pId : -1,    
53.                         name : "门户",    
54.                         url : "http://www.sina.com.cn",    
55.                         target : "navTab",    
56.                         rel : "xl"    
57.                     }];    
58.     function zTreeRegisterTarget(event, treeId, treeNode) {  
59.         initUI($('#'+treeId));  
60.     }  
61.           
62.     $(document).ready(function(){  
63.         $.fn.zTree.init($("#ztreedemo"), setting, zNodes);  
64.     });  
65.     //-->  
66. </SCRIPT>  

 

 

Html代码段：

Html代码  

1. <div class="accordionHeader">  
2. <h2><span>Folder</span>ZTree整合</h2>  
3. </div>  
4. <div class="accordionContent">  
5. <ul id="ztreedemo" class="ztree"></ul>  
6. </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对象
}
此解决方式后续再完善，封装为通用版。

前段效果图：

 

 

转自：http://njkf-hp.iteye.com/blog/1964232