欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DWZ整合zTree(实现版)

程序员文章站 2022-04-03 17:53:36
...

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

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

DWZ整合zTree(实现版)
 

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对象
}
此解决方式后续再完善,封装为通用版。

前段效果图:

 

 
DWZ整合zTree(实现版)
 

相关标签: jquery