DHTMLTree、Dtree和Ztree的学习使用

一、DHTMLTree是树菜单,允许我们快速开发界面优美,基于Ajax的javascript库.她允许在线编辑,拖拽,三种状态(全选、不选、半选),复选框等模式。同时在加载大数据量的时候,仍然可以保持非常高效的速度。

DHTMLTree是一个功能丰富的第三方JavaScript树菜单,它能够使用户快速添加一个外观非常漂亮的,基于Ajax技术的网页上的分层树。树视图支持在线节点编辑、现行的拖放功能、三态复选框以及更多功能。由于特殊的技术的使用,使dhtmlxTree能够快速有效的加载结构庞大的树。dhtmlxTree具有以下特点:强大的拖拽功能、为用户提供丰富的Javascript API、支持Ajax和服务器端集成以及快速执行Javascript树。

dhtmlxTree介绍及小DEMO:http://www.cnblogs.com/draem0507/archive/2013/02/01/2889317.html

DHTMLTree基础学习及API:http://www.cnblogs.com/lidabo/archive/2011/11/02/2233468.html

二、DTree是一个易于基于JavaScript的树形菜单控件,由JavaScript编写而成。支持无限分级,可以在同一个页面中放置多个dTree,可以为每个节点指定不同的图标。目前免费并且开源。使用简单,界面制作的也很专业。

三、Ztree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

  • 兼容 IE、FireFox、Chrome 等浏览器
  • 在一个页面内可同时生成多个 Tree 实例
  • 支持 JSON 数据
  • 支持一次性静态生成 和 Ajax 异步加载 两种方式
  • 支持多种事件响应及反馈
  • 支持 Tree 的节点移动、编辑、删除
  • 支持任意更换皮肤 / 个性化图标(依靠css)
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 简单的参数配置实现 灵活多变的功能

1 dtree
     dtree是就是一个js的开源树形组件,使用特别简单,可以根据标签打开新的链接,自定义显示图标等等。优点是功能简单、实用,但是不支持checkbox,不支持动态增加,删除节点,移动节点。当然如果可以利用Jquery等其他东西也是可以做到动态添加的,不过这样添加的代码就比较多。
参考资料:
     a 官方网站:http://destroydrop.com/javascripts/tree/
     b  http://blog.163.com/prevBlogPerma.do?host=fanxiaoqc@126&srl=331419002010111054056395&mode=prev&fromdm&fromSearch&isFromSearchEngine=yes
2 xtree
     xtree是基于ajax实现的属性菜单。它可以定制自己的icon和链接,xtree是基于对象的,它也是比较简单的一种树形结构。与dtree相比,可以动态的增加或者删除节点,直接有API方法可以提供。
参考资料:
     a 官方网站:http://webfx.eae.net/dhtml/xtree/index.html
3 ExtTree
  ExtTree是一个继承自Panel的树状组件,是EXTJS的一个组件。我们在使用时,直接以对象的方式进行调用。其中ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。我们可以在网上找到很多关于ExtJs的学习书籍。
4 E3tree
  E3Tree是E3平台下用于构造树形UI(menu,tree,outlookbar)的一个组件。它集成了现有的xtree、exttree和yuitree,能够在jsf/webwork/strtus/spring mvc 等等框架使用。我们可以通过学习它的参考手册对它进行系统的学习。
5 zTree
  zTree是一个依靠 jQuery 实现的多功能 “树插件”,支持选择框等显示,动态更改图标,提供多种事件响应回调,而且异步数据功能强大。相信涉及大型项目或者大量数据时,它的使用将非常方便。
     利用ztree和Dwr框架可以轻松的实现后台数据的异步加载,他们都是利用Ajax进行后台数据的异步刷新的,页面不会重新加载,而且速度非常快。可以参考这篇博文http://blog.csdn.net/zxingchao2009/article/details/6563714

时间: 2024-10-05 05:32:21

DHTMLTree、Dtree和Ztree的学习使用的相关文章

【ztree】完美实现复选框功能

在权限系统中,大多数的页面都用到了树形结构,其中最常用的便是树资源的加载和单击事件,除此之外ztree还可以实现很多功能.今天以实现复选框的添加功能为例,咱们再来深入的学习下ztree的应用. 一.实例描述 在用户管理模块中,需要给用户添加角色,而用户与角色的之间是一个多对多的关系.这里我们可以先加载两个角色树资源,通过两个树之间数据的交换,从而得到用户所拥有的角色资源,实现效果如下: 1.用户信息入口 2.加载角色信息 Datagrid表格中的"分配"按钮是针对单个用户的角色分配,而

基于PaaS通用校园办公云平台的设计与实现视频教程

基于PaaS通用校园办公云平台的设计与实现视频教程下载课程分享链接:https://pan.baidu.com/s/1RpC198Q76eTu1E-lyeuO9g 密码:3d8j 1.1.课程的背景该课程是一个paas平台搭建的课程,paas是云计算三层概念中的第二层,提出了平台及服务,向客户提供开发平台,即使客户不懂任何的编程知识,也一样可以根据自己的需求来定制软件模块.在课程中,引入了工作流中间件和元数据的概念.强大的工作流中间件保证了系统流程的稳定运行,自定义的工作流中间件也能够根据paa

zTree学习实例

今天做完一个zTree的实例,供有需要的学习! 效果图如下: 其中菜单的所有子节点是从数据库menu表中中读出来交给我们的zTree进行自动挂接. 接下来看看我们这个例子是如何实现的?附主要代码,有需要整个代码的可以评论!!!! 首先要用zTree必须引入这些 css和js <!-- ztree的js和css -->  <link rel="stylesheet" type="text/css" href="ztree/css/zTree

ztree学习笔记(一)

在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一下学习的过程. 先简单介绍一下ztree. ztree是一款依靠jQuery实现的"树形"插件,它的特点是性能优异,配置灵活,功能强大,经常用于一些项目的功能管理和权限管理上,我自己接触的几个项目上的功能管理和权限管理上就用到了ztree插件.先向大家推荐一下ztree的中文API,个人觉

JAVAEE——BOS物流项目02:学习计划、动态添加选项卡、ztree、项目底层代码构建

1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree(重点) 3.数据库建模工具PowerDesigner使用方式 4.myeclipse翻转引擎插件使用(了解) 5.项目底层代码构建(重点) n 持久层代码抽取 n 表现层代码抽取 6.实现BOS项目登录和注销功能 2 jQuery easyUI中动态添加选项卡 l 用于动态添加一个选项卡 l 选中指

ztree学习---将默认勾选的展开

这里只给出前台页面上的代码,数据可以从后台获取,注意,在封装数据的时候,注意:Id(节点的id,可以是数字也可以是字符串) , pid(父亲节点的id) , name(节点名称)不能少 . html页面插入的代码: <div id="dialog-confirm" class="hide"> <input type="hidden" id="uid" value=""/> <d

ztree学习之异步加载节点(一)

ztreedemo.jsp: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":&quo

easyUi 学习笔记 (一) 使用easyui 和ztree 创建前端框架

1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 4 <%@ include file="/common/page.jsp" %> // 这里是引用的公共代码 ,主要是css和js jstl 的引用 easyui核心js都在里面 5 <!DOCTYPE html

zTree学习日志 选中指定节点

ztree文档地址:http://www.treejs.cn/v3/api.php 1.根据节点的id值获取节点,需要注意idkey与getNodeByParam("属性值", id, null); 属性值一致,不然根据节点id选中节点可能会报ztree  Cannot read property 'chkDisabled' of null的错 获取node: var node = zTreeObj.getNodeByParam("idResources", id,