作者：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确实让我非常受伤啊。还是在调试的时候太过急躁，归根结底还是技术积累。
# 为将之道,当先治心,泰山崩于前而色不变,麋鹿兴于左而目不瞬。共勉！ #
- 本文已收录于下面专栏：
作者：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实战（双色）》作者之一——吴中骅访谈录
随机推荐
- cocos2d-iphone 与 UI组件
http://zhidao.baidu.com/link?url=v9d7y2doWqcPhKz1lz8TkO7ZQfslg-e-55JE0XP9VdKJ0vHobcLPEAXaXjD2lD-TGmg ...
- Linux 设备驱动--- 阻塞型字符设备驱动 --- O_NONBLOCK --- 非阻塞标志【转】
转自:http://blog.csdn.net/yikai2009/article/details/8653697 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 阻塞 阻 ...
- linux中高端内存和低端内存的概念【转】
转自:http://blog.csdn.net/hdujinhuihui/article/details/8686817 高端内存是Linux中一个重要的概念,初涉Linux时曾经对这个概念非常迷惑. ...
- Linux内存管理之mmap详解 【转】
转自:http://blog.chinaunix.net/uid-26669729-id-3077015.html 一. mmap系统调用 1. mmap系统调用 mmap将一个文件或者其它对象映射进 ...
- Profile 的翻译
最近要翻译一个英文网站的单词,正宗的英文网站总是有很多单词让我烦恼,这就是其中一个. 特地转一篇文章,对我大有帮助. 计算机中常用的 Profile 该如何理解? 我认为 Profile 即可作名词又 ...
- hdu 1301(最小生成树)
Jungle Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- 基于最新友盟开发文档，集成友盟分享功能，赋demo
集成准备 获取Appkey 快速集成 获取SDK,页面截图: 下载后打开 导入jar和res 添加回调Activity 微信 在包名目录下创建wxapi文件夹,新建一个名为WXEntryActivit ...
- typescript项目配置路径别名（路径映射）
在vue项目中,我们可以利用“@”来指代src目录,在普通webpack项目中,我们也可以通过配置webpack的config来指定路径别名,但是在typescript+webpack项目中我们该怎么 ...
- (1) SpringBoot创建发布
一.安装jdk8 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二.配置环境 ...
- l洛谷——P1211 [USACO1.3]牛式 Prime Cryptarithm
P1211 [USACO1.3]牛式 Prime Cryptarithm 题目描述 下面是一个乘法竖式,如果用我们给定的那n个数字来取代*,可以使式子成立的话,我们就叫这个式子牛式. *** x ** ...