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对象
}
此解决方式后续再完善,封装为通用版。
前段效果图:
上一篇: 投影仪怎么调节色彩度?
下一篇: Java IO流(三)