经过这几天对DHTMLXTree的折腾总算是有点眉目了。领导催得紧。组长紧的催。

唉,把握这次机会来好好总结一下DHTMLXTree。

还是老套路。首先来简单了解一下DHTMLXTree。

DHTMLXTree是DHX系列当中关于树的部分。另外还有像DHTMLXGrid控件。基本都是使用js来实现tree的样式和数据载入。支持的格式有xml、json。有下面几个特点:

特点

  • 支持界面的拖拽

  • 效率高

    在载入数据量比較大的时候可以高速的载入,性能比較好。

  • 界面样式特别丰富

  • API 操作起来比較简单

先来看看效果图

主要代码,这里仅列出部分基本的代码,有兴趣的朋友可以亲自试试

function loadTree() {

    //置空将要放置tree的div
document.getElementById("doctree_box").innerHTML = "";
//设置tree对象大小
var tree = new dhtmlXTreeObject("doctree_box", "100%", "100%", 0);
//显示样式
tree.setImagePath("${ctx}/codebase/imgs/");
//点击tree节点触发的事件
tree.setOnClickHandler( function(id) {
var type = tree.getUserData(id, "type");
if(null==type||""==type){//||"1"==type
rightFrame.location.href = "loadtreeservice!list.action?viewflag=1&funmenuId=${funmenuId}";
return;
}else{
openPathDocs(id);
}
});
tree.setXMLAutoLoadingBehaviour("function");
//当树调整自己主动载入树(用来载入下一级菜单)
tree.setXMLAutoLoading(function(item_id){
var id = item_id;
//获取userdata节点的type属性的值
var type = tree.getUserData(item_id, "type");
item_id = item_id.substring(0,item_id.indexOf('_'));
tree.loadXML("loadtreeservice!open_tree.action? id="+item_id+"&type="+type + "&itemid="+id+"&funmenuId=${funmenuId}"); });
//初始化tree
tree.loadXML("loadtreeservice!init_tree.action?d="
+ Math.random(), function() {
tree.openItem("${parentId}");
});
}

以上是用来载入tree的前台js,事实上主要就是这里。后台可以依据系统须要用xml或者json来返回数据,

下面是一种xml格式形式。

    public String inittree_() {

    StringBuffer sb = new StringBuffer();

    Department root = departmentManager
.getDeptById(depId);
//拼接xml格式
sb.append("<?xml version=\"1.0\" encoding='utf-8'?><tree id=\"0\"><item id=\""+ root.getId() + "\" text=\"" + root.getName() + "\">");
//拼接内部item的数据
//格式:<item id="**" text="显示的文字"></item>
buildTree(sb, list); sb.append("</item></tree>"); renderXML(sb.toString(), "UTF-8"); return null; }

这里假设存在tree之间的嵌套的情况就须要在tree的id上进行处理。

注意事项:

  • 根结点的tree的id始终都是 0 。
  • 须要将tree之间进行嵌套的时,须要将子树的id设置为上一节点的id_1.以此类推,id_2.这样保证两棵树可以嵌套在一起显示。

常见错误

  • load xml error。 这个错误是表示返回的数据不是xml格式的数据,拼接的过程中有问题。

  • XML Refer to not existing parent error 。这个是在使用tree嵌套的时候。id之间的匹配错误,子tree的无法找到父节点。

这次这个tree确实让我非常受伤啊。还是在调试的时候太过急躁,归根结底还是技术积累。

# 为将之道,当先治心,泰山崩于前而色不变,麋鹿兴于左而目不瞬。共勉! #

版权声明:本文为博主原创文章,未经博主同意不得转载。
  • 本文已收录于下面专栏:

树形展示数据——dhtmlxTree的使用

在Java Web项目开发中,一般用JSP做前台数据展示。后台通过SSH框架来进行高效开发,有流程的控制。业务的处理和对数据库的各种处理,而数据则存放在Oracle等选择的数据库中。如今大家想这样一个...
  • liujiahan629629
  • 2014年04月03日 00:45
  • 20878

怎样使用dhtmlxtree 和Json 数据格式创建和使用一棵tree

(声明:本人自觉得在Java界仅仅是个不起眼的小菜鸟。若哪里有疏忽或者出错的地方还请各位海涵而且帮忙改正,最主要希望自己的学习中遇到的问题能非常好的帮助你们)
先简介下dhtmlxtree:
dthm...
  • quniandongtian
  • 2014年02月04日 09:54
  • 2305

dhtmlxtree.js

  • 2010年08月12日 17:17
  • 68KB
  • 下载

页面树形控件dhtmlxTree、mztreeview及xtree比較分析

/***********本人原创,欢迎转载,转载请保留本人信息*************/
作者:wallimn
电邮:wallimn@sohu.com
博客:http://wallimn.bo...
  • wallimn
  • 2006年11月21日 09:51
  • 9799

树型控件dhtmlxtree使用注意事项~

  • piaolankeke
  • 2010年04月07日 13:23
  • 3275

dhtmlXTree 中文API

版本号:           struts2.1.6,hibernate3.3.2,spring2.5 jar包: 环境:Struts+hibernate+spring+mysql           ...
  • java_cxrs
  • 2010年10月29日 09:51
  • 10000

dhtmlTree例子

  • 2010年03月25日 17:33
  • 1.33MB
  • 下载

树形展示数据——dhtmlxTree的使用

在Java Web项目开发中,一般用JSP做前台数据展示,后台通过SSH框架来进行高效开发,有流程的控制,业务的处理和对数据库的各种处理。而数据则存放在Oracle等选择的数据库中。如今大家想这样一个...
  • liujiahan629629
  • 2014年04月03日 00:45
  • 20878

怎样给元素绑定click点击事件

最简单的莫过于使用click方法:

1

2

3

    var btn
...

  • aerchi
  • 2014年04月26日 10:08
  • 7057

Android给TextView加入点击事件

1.界面
首先设定TextView的clickable属性为true。

能够在布局文件里进行设定。比方:
...

  • qq_29134495
  • 2016年05月14日 01:16
  • 2919

作者:wallimn的更多相关文章

  1. 浏览器内部工作原理--作者:Tali Garsiel

    本篇内容为转载,主要用于个人学习使用,作者:Tali Garsiel 一.介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到 ...

  2. Eclipse自动生成作者、日期注释等功能设置

    我们在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java-> ...

  3. SVN如何查看修改的文件记录] 来源:Linux社区 作者:frogoscar

    SVN如何查看修改的文件记录 [日期:2014-11-20] 来源:Linux社区  作者:frogoscar [字体:大 中 小]     主要是有四个命令,svn log用来展示svn 的版本作者 ...

  4. 《C++ API设计》作者Martin Reddy访谈问题征集

    Martin Reddy博士是软件行业的一名老兵,有着15年以上的从业经验,共撰写过40多篇论文,拥有3项软件专利,并与他人合著了Level of Detail for 3D Graphics.另外, ...

  5. XCode修改公司名称和作者名称

    新建的文件最上方都会有一段类似如下的版权声明 // //  ViewController.m //  CBDemoProject001 // //  Created by CB on 16/3/17. ...

  6. C#:USB设备枚举 --转自CSDN作者:Splash

    (一)DeviceIoControl的PInvoke /* ---------------------------------------------------------- 文件名称:Device ...

  7. Python 2.7_发送简书关注的专题作者最新一篇文章及连接到邮件_20161218

    最近看简书文章关注了几个专题作者,写的文章都不错,对爬虫和数据分析都写的挺好,因此想到能不能获取最新的文章推送到Ipad网易邮箱大师.邮件发送代码封装成一个函数,从廖雪峰大神那里学的  http:// ...

  8. VS2010+C#+在新建类或接口时在文件开头自动生成作者和日期等备注

    今天在公司项目准备开始,为达到项目的规范管理,要求每个文件的标准日期,作者等信息,搜集了百度的资料,新建文件时效果如下: 其实原理很简单,只要修改VS,IDE文件下的类(或接口)模版代码 文件路径:C ...

  9. 《Node.js实战(双色)》作者之一——吴中骅访谈录

随机推荐

  1. SqliteDeveloper 破解

    方法1: 注册表删除 HKEY_CURRENT_USER\SharpPlus\SqliteDev 下的 StartDate 方法2:  安装完成SQLite Developer后,先不要打开软件,下面 ...

  2. QML与Qt C++ 交互机制探讨与总结(转)

    原文转自 https://www.cnblogs.com/aoldman/p/4103510.html 介绍 QML和 C++对象可以通过,signals,slots和 属性修改进行交互.对于一个C+ ...

  3. flask的orm框架(SQLAlchemy)-创建表

    # 转载请留言联系 ORM 是什么? ORM,Object-Relation Mapping.意思就是对象-关系映射.ORM 主要实现模型对象到关系数据库数据的映射. 优点 : 只需要面向对象编程, ...

  4. 使用函数方式生成UUID

    1.默认生成的UUID是有 “-” 分隔符的 例如: public static void main(String[] args){ String uuid = UUID.randomUUID().t ...

  5. Fiddler抓包7-post请求(json)【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言上一篇讲过get请求的参数都在url里,post的请求相对于get ...

  6. 51nod 1095 Anigram单词【hash/map/排序/字典树】

    1095 Anigram单词 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 一个单词a如果通过交换单词中字母的顺序可以得到另外的单词b,那么定义b ...

  7. 后门构建工具Backdoor Factory

    后门构建工具Backdoor Factory   在渗透测试中,后门程序帮助渗透测试人员在目标机器上执行各种预期的操作.例如,它可以建立从目标主机到攻击机的网络连接,方便渗透测试人员控制目标主机.Ka ...

  8. luogu P1146 硬币翻转

    题目描述 在桌面上有一排硬币,共N枚,每一枚硬币均为正面朝上.现在要把所有的硬币翻转成反面朝上,规则是每次可翻转任意N-1枚硬币(正面向上的被翻转为反面向上,反之亦然).求一个最短的操作序列(将每次翻 ...

  9. 【codevs1907】【方格取数3】二分图最大带权独立集

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=59001242 向大(hei)佬(e)势力学(di ...

  10. pyttsx的中文语音识别问题及探究之路

    最近在学习pyttsx时,发现中文阅读一直都识别错误,从发音来看应该是字符编码问题,但搜索之后并未发现解决方案.自己一路摸索解决,虽说最终的原因非常可笑,大牛们可能也是一眼就能洞穿,但也值得记录一下. ...