作者：wallimn

经过这几天对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方法：

var btn
...

aerchi
2014年04月26日 10:08
7057

Android给TextView加入点击事件

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

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

qq_29134495
2016年05月14日 01:16
2919

作者：wallimn的更多相关文章

浏览器内部工作原理--作者：Tali Garsiel
本篇内容为转载,主要用于个人学习使用,作者:Tali Garsiel 一.介绍浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到 ...
Eclipse自动生成作者、日期注释等功能设置
我们在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java-> ...
SVN如何查看修改的文件记录] 来源：Linux社区作者：frogoscar
SVN如何查看修改的文件记录 [日期:2014-11-20] 来源:Linux社区作者:frogoscar [字体:大中小] 主要是有四个命令,svn log用来展示svn 的版本作者 ...
《C++ API设计》作者Martin Reddy访谈问题征集
Martin Reddy博士是软件行业的一名老兵,有着15年以上的从业经验,共撰写过40多篇论文,拥有3项软件专利,并与他人合著了Level of Detail for 3D Graphics.另外, ...
XCode修改公司名称和作者名称
新建的文件最上方都会有一段类似如下的版权声明 // // ViewController.m // CBDemoProject001 // // Created by CB on 16/3/17. ...
C#：USB设备枚举－－转自CSDN作者：Splash
(一)DeviceIoControl的PInvoke /* ---------------------------------------------------------- 文件名称:Device ...
Python 2.7_发送简书关注的专题作者最新一篇文章及连接到邮件_20161218
最近看简书文章关注了几个专题作者,写的文章都不错,对爬虫和数据分析都写的挺好,因此想到能不能获取最新的文章推送到Ipad网易邮箱大师.邮件发送代码封装成一个函数,从廖雪峰大神那里学的 http:// ...
VS2010+C#+在新建类或接口时在文件开头自动生成作者和日期等备注
今天在公司项目准备开始,为达到项目的规范管理,要求每个文件的标准日期,作者等信息,搜集了百度的资料,新建文件时效果如下: 其实原理很简单,只要修改VS,IDE文件下的类(或接口)模版代码文件路径:C ...
《Node.js实战（双色）》作者之一——吴中骅访谈录

随机推荐

[hdu1695] GCD ——欧拉函数+容斥原理
题目给定两个区间[1, b], [1, d],统计数对的个数(x, y)满足: \(x \in [1, b]\), \(y \in [1, d]\) ; \(gcd(x, y) = k\) HDU1 ...
UVA 306 Cipher
题意 :lucky cat里有翻译.英文也比较好懂. 很容易发现有周期然后就拍就好了注意每组数据后边都有空行包括最后一组.一开始以为最后一组没有空行.唉.. #include <map> ...
Linux内核实践之序列文件【转】
转自:http://blog.csdn.net/bullbat/article/details/7407194 版权声明:本文为博主原创文章,未经博主允许不得转载. 作者:bullbat seq_fi ...
我和阿里云RDS的故事
于阿里云的RDS性能无法满足我们公司系统的要求,数据库偶尔出现莫名的查询慢(索引等做了全面优化)经过好多次投诉,情况还是没有改善.由于是类金融的系统,对这种情况是不能接受的.相信系统数据有5G以上有人 ...
visio画任意形状图形
1,连接线--右击---曲线连接线 2,选中组合 3,开发工具--操作--连接--填充
【原创】Talend ETL Job日志框架——基于P&G项目的一些思考和优化
一.背景接触talend也挺长一段时间了,在P&G项目中每天都是使用它开发job,做ETL,也看了前辈开发的很多ETL Job,学到不少.也接触了TAC(talend administrat ...
正则表达式之Regex.Replace()用法
正则表达式替换匹配到的字符串 string txt = "AAA12345678AAAA"; //匹配到的连续数字的前4位用*替换 string m =Regex.Replace( ...
AC日记——Broken BST codeforces 797d
D - Broken BST 思路: 二叉搜索树: 它时间很优是因为每次都能把区间缩减为原来的一半: 所以,我们每次都缩减权值区间. 然后判断dis[now]是否在区间中: 代码: #include ...
CF985B Switches and Lamps【矩阵操作/枚举】
[链接]CF985B [题意]:给n盏灯,m个开关,每次按开关只能将灯从灯灭的状态转变为灯亮,问是否存在不按所有开关就将所有灯打开的方法. [分析]:有两种办法,一种代码复杂点,容易想到枚举去掉每一行 ...
Servlet笔记2-文件上传
Servlet上传文件: Servlet 3.0改进了部分API,其中HttpServletRequest增加了对文件上传的支持. HttpServletRequest提供了两个方法来处理文件上传: ...

作者：wallimn

特点

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

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

dhtmlxtree.js

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

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

dhtmlXTree 中文API

dhtmlTree例子

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

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

Android给TextView加入点击事件

作者：wallimn的更多相关文章

随机推荐

热门专题