`
忘忧鸟
  • 浏览: 144960 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

DWZ整合zTree(实现版)

    博客分类:
  • DWZ
阅读更多

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

前段效果图:

 

 

 

  • 大小: 27.2 KB
  • 大小: 9.4 KB
  • 大小: 12 KB
分享到:
评论
10 楼 daishy 2015-07-29  
楼主还在不在。。。。   求demo,邮箱283863275@qq.com
万分感谢
9 楼 xiaosheng_papa 2015-05-04  
楼主还在不在。。。。   求demo,邮箱272457017@qq.com
8 楼 xiaosheng_papa 2015-05-04  
这上面有点不详细,跟着步奏不行啊,可否来分demo,3Q。。。。
7 楼 wagy0226 2015-01-02  
能否提供一个demo,谢谢.wagy0226@163.com
6 楼 咫尺千山路 2014-10-20  
求demo一份,万分感谢!    461788603@qq.com
5 楼 306085175 2014-07-18  
来份demo 楼主 123984044@qq.com
4 楼 caoyamou 2014-05-13  
按照你的方法进行修改,有问题啊,能否提供份demo呢?谢谢.56123877@qq.com
3 楼 王雷震 2014-01-11  
<ul id="ztreedemo" class="tree"></ul>   修改为 <ul id="ztreedemo" class="ztree"></ul> 
2 楼 王雷震 2014-01-11  
我按照你的整合为什么树的图标不出来
1 楼 hlzds2008 2013-12-20  
能否提供一份Demo,邮件:745272308@qq.com

相关推荐

    dwz,ztree整合,操作都在头部

    通过以上步骤,我们可以实现DWZ和ZTree的整合,将所有操作都集中到页面头部,提供统一的操作入口,使用户在使用过程中更加流畅和高效。这个整合方案对于需要管理和操作树形结构数据的Web应用来说,是一个很好的实践...

    dwz完美整合ztree,kindeditor,My97DatePicker

    代码例子是JAVA的,dwz,ztree等是前台的东西,和后台没有关系。不管.net还是php都通用,请根据使用的平台,修改发布WebRoot下的文件,修改admin.jsp就可以。 页面集成了ztree3.3,kindeditor,My97DatePicker的使用...

    asp.net整合dwz ztree实现用户管理权限登录管理

    在本项目中,开发者利用ASP.NET的强大力量,结合了DWZ(Dynamic Web Zone)富客户端框架、ZTree控件以及AceAdmin框架,构建了一个完整的用户管理与权限登录系统。 DWZ是一个开源的JavaScript MVC框架,主要用于构建...

    dwz完美整合ztree3.5(包括excheck),kindeditor,My97DatePicker

    最初在CSDN上发了这份代码,整合了ztree3.3的核心部分,详情可以参看这个地址的说明: http://download.csdn.net/detail/ohaozy/8691959 据部分朋友的意见,需要使用ztree的excheck功能,于是我重新整合了ztree3.5,...

    springmvc+mybatis+dwz整合

    在IT行业中,构建Web应用程序是常见的任务,而`SpringMVC`、`MyBatis`和`DWZ`是三个非常流行的开源框架,用于实现这一目标。本文将深入探讨这三个框架如何协同工作,以及如何进行整合。 首先,`SpringMVC`是Spring...

    dwz整合kindeditor

    3分不贵的,这个问题解决的也不容易,今天突然来啦感觉,另外说下上次的dwz+ztree 是可以使用的,前几天看啦下评论发现有人说用不了,呵呵 可能 你有地方还木配置好, 具体的项目代码我就不贴了,不方便~~ 主要的我...

    think_DWZ整合

    整合ThinkPHP和DWZ,开发者可以利用ThinkPHP的后台逻辑处理能力,如数据验证、权限控制、API接口等,同时利用DWZ提供的前端模板和交互效果,实现用户友好的界面。这样的结合,不仅让开发者可以专注于业务逻辑的编写...

    DWZ+ThinkPHP+kindeditor整合,及DWZ官方整合部分小BUG修复

    首先非常感谢DWZ官方整合了DWZ+ThinkPHP,方便我们PHPer的开发,DWZ的后台框架非常好用。 其次,本人在 DWZ官方 整合的基础上做了些修改,而且经测试完全可用,现在本人在此基础上开发项目。 修改的内容如下: 1、...

    SpringMVC+Mybatis+DWZ整合例子(参考)

    1:SpringMVC+Mybatis+DWZ+Orcale整合 2:Oracle数据库账户Scott 密码123 自己根据实际情况修改 3:表在数据库里 4:只有”我的测试“一个可用,其余没做,错误页处理不完全,我注释了! 5:默认有登陆页面,账号密码...

    DWZ帮助文档 PDF版

    3. 组件扩展:DWZ提供了Tab组件、Accordion组件、Table组件等多种UI组件的扩展,帮助开发者实现复杂的界面布局和交互。 4. CSS样式支持:DWZ框架具有内置的CSS样式集,开发者可以根据项目需求进行自定义。 5. 输入...

    DWZ框架整合Java三大框架(购物系统Shop)

    **DWZ框架整合Java三大框架(购物系统Shop)** 在Java Web开发中,Spring、Hibernate和Struts2被广泛称为“Java三大框架”。这些框架分别处理了不同的层面,Spring负责控制层逻辑,Hibernate处理数据持久化,而...

    dwz_jui 1.6.1版本

    `dwz_jui 1.6.1`是一款基于jQuery UI和Bootstrap的前端框架,用于构建响应式、交互性强的Web应用。这个框架是专为提高开发效率和提供美观的用户界面而设计的。在`1.6.1`这个版本中,开发者可能会发现一些性能优化、...

    dwz .net 简单分页 表头排序、查询

    【标题】:“DWZ.NET 简单分页、表头排序及查询”是指在.NET开发环境中使用DWZ(Dynamic Web Zone)框架实现的一种高效、便捷的网页数据展示功能。DWZ.NET是一款基于Ajax的前端交互框架,尤其适用于构建富交互性的...

    spring mvc,mybatis,Shiro,dwz实现的通用后台系统

    本篇文章将详细解析一个基于Spring MVC、MyBatis、Apache Shiro以及DWZ(EasyUI的轻量级前端框架)实现的通用后台系统,旨在帮助开发者理解这些技术如何协同工作,打造高效能的应用。 首先,Spring MVC是Spring框架...

    JAVA WEB 练手习作

    1、整合了SSH,DWZ,zTree和Json,使用了AJAX技术,DWZ的一些基本功能都有实现,有一些简单页面没有写; 2、整个代码主要是展示一些技术融合和一部分企业WEB网站功能的基本演练; 3、页面访问拦截器有写;系统日志只...

    开源框架DWZ与ASP.NET MVC3的整合应用

    例如“1.pdf”可能详细讲解了整合的准备工作,“2.pdf”可能介绍了如何在视图中使用DWZ组件,“3.pdf”可能涉及服务器端的MVC3控制器实现,“4.pdf”和“5.pdf”可能涵盖了更深入的应用技巧或常见问题解决方案。...

    dwz(java版)

    "DWZ(Java版)"是一个基于Java开发的Web应用程序框架,专门用于构建高效、便捷的管理后台系统。这个框架的核心特性在于它集成了常见的“增删改查”(CRUD)操作,使得开发者能够快速搭建数据操作界面,提高开发效率。...

    整合spring mvc+mybatis+Shiro+dwz实现的通用后台系统

    整合spring mvc+mybatis+Shiro+dwz实现的通用后台系统。完成了权限管理,角色管理,员工管理,部门管理等常用功能。无论私单公单都可快速上手。数据库使用mysql,根据实体类建库即可。

    dwz框架实现拦截器 session超时跳转登陆页面

    dwz框架实现拦截器 session超时跳转登陆页面 DWZ框架 struts2拦截器 session超时

    DWZ+thinkPHP整合的一个后台,有RBAC管理部分

    总的来说,这个DWZ+ThinkPHP整合的后台管理系统利用了两者的优势,实现了RBAC的精细权限控制,为后台管理提供了安全可靠的环境。通过学习和实践这个项目,开发者可以提升自己在Web开发中的综合能力,尤其是对前后端...

Global site tag (gtag.js) - Google Analytics