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代码段:
- <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="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