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代码  


<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代码段：

Html代码  


<div class="accordionHeader">  
<h2><span>Folder</span>ZTree整合</h2>  
</div>  
<div class="accordionContent">  
<ul id="ztreedemo" class="ztree"></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对象

}

此解决方式后续再完善，封装为通用版。

前段效果图：

 

 



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