现在位置首页 / 前端开发 /正文

ztree教程--DWZ(j-UI) 中使用zTree替换jTree

作者: IT小兵 | 2014年7月15日| 热度:℃ | 评论: |参与:

在群里一直有人问怎么在dwz中使用ztree。今天分享一个将dwz的jtree改成ztree的例子。[zTree使用Bootstrap皮肤样式及demo]

组件版本

替换步骤

样式文件替换

定位dwz的themes/css下的core.css文件,在184行~216行中注释JTree样式。

提取zTree的样式文件zTreeStyle.css(位于css/zTreeStyle)及图标资源img文件夹。前者代码置于dwz的core.css的底部以防止dwz预定义的样式破坏zTree的样式。同时将img文件夹与core.css放在同一个文件夹下(themes/css/)。

脚本文件替换与修改

找到DWZ的js文件夹下的dwz.tree.js文件,用zTree的js文件jquery.ztree.all-3.5.js中的内容替换(如果不需要zTree的excheck + exedit扩展,可以使用jquery.ztree.core-3.5.js)。

脚本内容替换完成后,需要修改dwz.ui.jsdwz.tree.js(现在它的脚本语句是zTree的):

  • dwz.ui.js

注释掉77行的调用jTree语句。

$("ul.tree", $p).jTree();
  • dwz.tree.js

1、树节点添加DWZ中的rel属性(添加DWZ中的external属性同理):

找到makeDOMNodeNameBefore方法(当前版本位于1112行),在html.push方法后添加:

if (node.rel) {    html.push("' rel='", node.rel);}

2、更改节点的默认Target为navTab

找到makeNodeTarget方法(当前版本位于1178行),return语句修改为return (node.target || "navTab");

3、修改节点属性更新方法updateNode(当前版本位于1639行),追加view.setNodeRel(this.setting, node)

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);        }    }

调用方式

原先的jTree调用方式

<ul class="tree treeFolder">    <li>        <a href="tabsPage.html" target="navTab">主框架面板</a>        <ul>            <li><a href="main.html" target="navTab" rel="main">我的主页</a></li>            <li><a href="http://www.baidu.com" target="navTab" rel="page1">页面一(外部页面)</a></li>            <li><a href="demo_page2.html" target="navTab" rel="external" external="true">iframe navTab页面</a></li>        </ul>    </li></ul>

现在的zTree调用方式: 将上述树DOM内容更改为

<div class="zTreeDemoBackground left">    <ul id="treeDemo" class="ztree"></ul></div>

添加如下调用脚本:

var setting = {        data: {            simpleData: {                enable: true            }        }};var zNodes =[        { id:1, pId:0, name:"主框架面板", url:"tabsPage.html", target:"navTab", open:true},        { id:2, pId:1, name:"我的主页", url:"main.html", target:"navTab", rel:"main"},        { id:3, pId:1, name:"iframe navTab页面", url:"demo_page2.html", target:"navTab", rel:"external", external:"true"}    ];    $(document).ready(function(){        $.fn.zTree.init($("#treeDemo"), setting, zNodes);    });

注意:原先超链接中href属性名要更改为url。

原文地址:

用zTree替换DWZ(j-UI)中的jTree

http://doslin.com/use-ztree-replace-jtree-of-dwz/ 


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询