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

前段效果图:

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值