<script type="text/javascript">
var tree = new dhtmlXTreeObject('category_tree', '100%', '100%', 0); // 创建dhtmlxTree对象
tree.setSkin('dhx_skyblue'); // 设置皮肤样式
tree.setImagePath('#springUrl("/resources/dhtmlxTree/imgs/csh_bluefolders/")'); // 设置样式所需的图像位置
tree.enableDragAndDrop(0); // 设置拖拽 0:不允许拖拽
......
...... 以下代码省略
......
</script>
其中, var tree = new dhtmlXTreeObject('category_tree', '100%', '100%', 0);
项目中要做个分类树和部门树。
架构师让用dhtmlxTree 做个树出来。以前也没写过树。也不知道怎么做。
下载了dhtmlxTree 组件包。网上找了两篇文档看了看。一句话看了半天也看不出来个所以然。
妈的那些文档不解决实际问题。。真他妈的蛋疼。。自己动手丰衣足食。。自己动手写。。写好了忘了没写文档。写个文档已被后患。。希望对能用到的朋友有所帮助 。。10分钟绝对能学会 。。下面有文档。。后面附上的是源码。。完全拷贝改改就能用。。
目前试用版本:v2.6 Standard Edition
使用说明如下:
1、解压当前目录下 dhtmlxTree.zip 文件,得到如下文件夹和文件:
----解压目录
- dhtmlxConnector
- dhtmlxDataProcessor
- dhtmlxTree
- docsExplorer
- libCompiler
- index.html
- License_GPL.html
- readme.txt
2、将dhtmlxTree开发所需文件加入到项目工程中。
拷贝解压出来的“dhtmlxTree”文件夹到doxenter-maven\src\main\webapp\resources下。
3、为了在项目中方便使用dhtmlxTree,需要将dhtmlxTree的libary、css引入到项目页面中。
在doxenter-maven\src\main\webapp\WEB-INF\velocity\common\macro路径下的changyong.vm页面中,加入如下代码:
<link href="#springUrl('/resources/dhtmlxTree/dhtmlxtree.css')" rel="stylesheet" type="text/css" charset="UTF-8" />
<script src="#springUrl('/resources/dhtmlxTree/dhtmlxcommon.js')" type="text/javascript" charset="UTF-8"></script>
<script src="#springUrl('/resources/dhtmlxTree/dhtmlxtree.js')" type="text/javascript" charset="UTF-8"></script>
一句话引入需要用到的css和js其中js和css的引入路径必须根据实际相对路径,否则引用无效。
4、页面中dhtmlxTree的使用:
【添加DIV】在开发页面中添加一个DIV,用来展示Tree,代码如下:
<div id="category_tree" style="width:280px; height:320px;border:1px solid Silver;"></div>
注意:该DIV中id是必须的,id的值是自定义的,如以上代码的DIV中id="category_tree" 。
【dhtmlxTree的初始化和加载】
创建并初始化dhtmlxTree,代码如下:
代码中:
构造方法中:
第一个参数:“category_tree”必须与<DIV>中的id值对应;
第二个参数: 树的宽度为100%;
第三个参数: 树的高度为100%;
第四个参数: 树的根节点ID的值为0;
dhtmlxTree对象创建好以后,需要加载数据,加载的方式有很多种,我们这里以读取XML文件为例。
在以上代码后加入一下代码:
tree.setXMLAutoLoading('#springUrl("/index/loadCategoryXMLTree")'); // 默认动态加载
tree.loadXML('#springUrl("/index/loadCategoryXMLTree")'); // 从xml一次加载
其中:'#springUrl("/index/loadCategoryXMLTree")'是调用后台返回XML数据文件的URL
若要使用dhtmlxTree的其他数据加载方式,请参考dhtmlxTree的API等相关文档。
下面是源码
/**
* <p>获取所有的部门并生成tree</p>
* @param response
* @throws Exception
*/
/** 系统初始化的部门根节点ID=0 PID=0 */
private static final int DEPARTMENT_ROOT_ID = 0;
@RequestMapping(method = RequestMethod.GET)
public void loadDepartmentXMLTree(HttpServletResponse response)
throws Exception{
Document document = DocumentHelper.createDocument();//创建document
Element xmlRoot = document.addElement("tree").addAttribute("id", "-1");//xml根节点
Element departmentRoot = null; //部门根节点
List<Department> list = departmentService.get();//得到部门list 按降序排列
if(list != null && list.size()>0){//当获取的集合不为null并且结合大小大于0
DepartmentTree departmentTree = new DepartmentTree();//创建departmentTree 对象此类是
//按ID升序遍历部门List
for(int i = 1;i<list.size(); i++){
Department department = list.get(list.size() - i);
//如果是部门根节点,则追加到xml根节点下
//如果是部门的子节点,用visitor模式进行xml遍历生成子部门
if(department.getId() == DEPARTMENT_ROOT_ID){
departmentRoot = xmlRoot.addElement("item");
departmentRoot.addAttribute("text", department.getName());
departmentRoot.addAttribute("id", String.valueOf(department.getId()));
departmentRoot.addAttribute("pid",String.valueOf(department.getPid()));
departmentRoot.addAttribute("open", "1"); //默认展开第一级子部门
} else {
departmentTree.setDepartment(department);
departmentRoot.accept(departmentTree);// 利用dom4j的visitor模式遍历xml文件生成子部门节点
}
}
}
// 设置缓存
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader("Expires", 0);
//设置文档类型和编码UTF-8
response.setContentType("text/xml");
PrintWriter writer = response.getWriter();
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("UTF-8");
// 生成XML
XMLWriter xmlWriter = new XMLWriter(writer, format);
xmlWriter.write(document);
xmlWriter.flush();
}
此类DepartmentTree 必须继承VisitorSupport 并且重写visit 方法
public class DepartmentTree extends VisitorSupport {
private Department department;
/**
* 取得当前部门的父部门ID,与xml文档中部门ID比较,
* 如果相等则将当前部门挂在xml文档对应父部门下
*/
@Override
public void visit(Element node){
if(node.attributeValue("id").equals(String.valueOf(this.department.getPid()))){
Element element = node.addElement("item");
element.addAttribute("text", this.department.getName());
element.addAttribute("id", String.valueOf(this.department.getId()));
element.addAttribute("pid", String.valueOf(this.department.getPid()));
}
}
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
}
//页面代码
<script type="text/javascript">
var tree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', -1);
tree.setSkin('dhx_skyblue');
tree.setImagePath('#springUrl("/resources/dhtmlxTree/imgs/csh_bluefolders/")');
tree.enableDragAndDrop(0);
// loadXML
tree.setXMLAutoLoading('#springUrl("/department/loadDepartmentXMLTree")');
tree.loadXML('#springUrl("/department/loadDepartmentXMLTree")');
</script>
项目中要做个分类树和部门树。
架构师让用dhtmlxTree 做个树出来。以前也没写过树。也不知道怎么做。
下载了dhtmlxTree 组件包。网上找了两篇文档看了看。一句话看了半天也看不出来个所以然。
妈的那些文档不解决实际问题。。真他妈的蛋疼。。自己动手丰衣足食。。自己动手写。。写好了忘了没写文档。写个文档已被后患。。希望对能用到的朋友有所帮助 。。10分钟绝对能学会 。。下面有文档。。后面附上的是源码。。完全拷贝改改就能用。。
目前试用版本:v2.6 Standard Edition
使用说明如下:
1、解压当前目录下 dhtmlxTree.zip 文件,得到如下文件夹和文件:
----解压目录
- dhtmlxConnector
- dhtmlxDataProcessor
- dhtmlxTree
- docsExplorer
- libCompiler
- index.html
- License_GPL.html
- readme.txt
2、将dhtmlxTree开发所需文件加入到项目工程中。
拷贝解压出来的“dhtmlxTree”文件夹到doxenter-maven\src\main\webapp\resources下。
3、为了在项目中方便使用dhtmlxTree,需要将dhtmlxTree的libary、css引入到项目页面中。
在doxenter-maven\src\main\webapp\WEB-INF\velocity\common\macro路径下的changyong.vm页面中,加入如下代码:
<link href="#springUrl('/resources/dhtmlxTree/dhtmlxtree.css')" rel="stylesheet" type="text/css" charset="UTF-8" />
<script src="#springUrl('/resources/dhtmlxTree/dhtmlxcommon.js')" type="text/javascript" charset="UTF-8"></script>
<script src="#springUrl('/resources/dhtmlxTree/dhtmlxtree.js')" type="text/javascript" charset="UTF-8"></script>
一句话引入需要用到的css和js其中js和css的引入路径必须根据实际相对路径,否则引用无效。
4、页面中dhtmlxTree的使用:
【添加DIV】在开发页面中添加一个DIV,用来展示Tree,代码如下:
<div id="category_tree" style="width:280px; height:320px;border:1px solid Silver;"></div>
注意:该DIV中id是必须的,id的值是自定义的,如以上代码的DIV中id="category_tree" 。
【dhtmlxTree的初始化和加载】
创建并初始化dhtmlxTree,代码如下:
<script type="text/javascript">
var tree = new dhtmlXTreeObject('category_tree', '100%', '100%', 0); // 创建dhtmlxTree对象
tree.setSkin('dhx_skyblue'); // 设置皮肤样式
tree.setImagePath('#springUrl("/resources/dhtmlxTree/imgs/csh_bluefolders/")'); // 设置样式所需的图像位置
tree.enableDragAndDrop(0); // 设置拖拽 0:不允许拖拽
......
...... 以下代码省略
......
</script>
其中, var tree = new dhtmlXTreeObject('category_tree', '100%', '100%', 0); 代码中:
构造方法中:
第一个参数:“category_tree”必须与<DIV>中的id值对应;
第二个参数: 树的宽度为100%;
第三个参数: 树的高度为100%;
第四个参数: 树的根节点ID的值为0;
dhtmlxTree对象创建好以后,需要加载数据,加载的方式有很多种,我们这里以读取XML文件为例。
在以上代码后加入一下代码:
tree.setXMLAutoLoading('#springUrl("/index/loadCategoryXMLTree")'); // 默认动态加载
tree.loadXML('#springUrl("/index/loadCategoryXMLTree")'); // 从xml一次加载
其中:'#springUrl("/index/loadCategoryXMLTree")'是调用后台返回XML数据文件的URL
若要使用dhtmlxTree的其他数据加载方式,请参考dhtmlxTree的API等相关文档。
下面是源码
private static final int DEPARTMENT_ROOT_ID = 0;
@RequestMapping(method = RequestMethod.GET)
public void loadDepartmentXMLTree(HttpServletResponse response)
throws Exception{
Document document = DocumentHelper.createDocument();//创建document
Element xmlRoot = document.addElement("tree").addAttribute("id", "-1");//xml根节点
Element departmentRoot = null; //部门根节点
List<Department> list = departmentService.get();//得到部门list 按降序排列
if(list != null && list.size()>0){//当获取的集合不为null并且结合大小大于0
DepartmentTree departmentTree = new DepartmentTree();//创建departmentTree 对象此类是
//按ID升序遍历部门List
for(int i = 1;i<list.size(); i++){
Department department = list.get(list.size() - i);
//如果是部门根节点,则追加到xml根节点下
//如果是部门的子节点,用visitor模式进行xml遍历生成子部门
if(department.getId() == DEPARTMENT_ROOT_ID){
departmentRoot = xmlRoot.addElement("item");
departmentRoot.addAttribute("text", department.getName());
departmentRoot.addAttribute("id", String.valueOf(department.getId()));
departmentRoot.addAttribute("pid",String.valueOf(department.getPid()));
departmentRoot.addAttribute("open", "1"); //默认展开第一级子部门
} else {
departmentTree.setDepartment(department);
departmentRoot.accept(departmentTree);// 利用dom4j的visitor模式遍历xml文件生成子部门节点
}
}
}
// 设置缓存
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader("Expires", 0);
//设置文档类型和编码UTF-8
response.setContentType("text/xml");
PrintWriter writer = response.getWriter();
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("UTF-8");
// 生成XML
XMLWriter xmlWriter = new XMLWriter(writer, format);
xmlWriter.write(document);
xmlWriter.flush();
}
此类DepartmentTree 必须继承VisitorSupport 并且重写visit 方法
public class DepartmentTree extends VisitorSupport {
private Department department;
@Override
public void visit(Element node){
if(node.attributeValue("id").equals(String.valueOf(this.department.getPid()))){
Element element = node.addElement("item");
element.addAttribute("text", this.department.getName());
element.addAttribute("id", String.valueOf(this.department.getId()));
element.addAttribute("pid", String.valueOf(this.department.getPid()));
}
}
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
}
//页面代码
<script type="text/javascript">
var tree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', -1);
tree.setSkin('dhx_skyblue');
tree.setImagePath('#springUrl("/resources/dhtmlxTree/imgs/csh_bluefolders/")');
tree.enableDragAndDrop(0);
// loadXML
tree.setXMLAutoLoading('#springUrl("/department/loadDepartmentXMLTree")');
tree.loadXML('#springUrl("/department/loadDepartmentXMLTree")');
</script>
相关推荐
【dhtmltree】是一款基于Ajax技术的动态树形菜单组件...总的来说,dhtmltree是一个强大的工具,为Web开发人员提供了构建动态树形菜单的强大功能。通过深入学习和实践,开发者可以利用它创建出高效、易用的交互式界面。
8. **插件或库的使用**:有些开发者可能会选择使用现成的dhtmltree库,如jQuery UI的Treeview、jstree等,它们提供了丰富的功能和易于使用的API,简化开发过程。 9. **浏览器兼容性**:考虑到不同的浏览器可能对...
在IT领域,JavaScript库是构建交互式Web应用的关键工具,其中“dhtmltree”是一个用于创建动态HTML树形菜单的...通过研究这些资源,开发者不仅可以掌握dhtmltree的用法,还能提升对JavaScript和前端开发的整体理解。
dtree,dhtmltree,tree,树形菜单,树形,权限菜单 dtree,dhtmltree,tree,树形菜单,树形,权限菜单 dtree,dhtmltree,tree,树形菜单,树形,权限菜单
1. **动态加载**:dhtmlTree支持按需加载子节点,减少页面初始化时的数据传输量,提高性能。 2. **可扩展性**:提供API接口,可以自定义节点点击事件、拖拽操作、右键菜单等功能。 3. **样式定制**:允许通过CSS来...
描述中提到"**用 dhtmltree 插件写的小实例,在一些cms中使用的比较多**",这暗示了"DHTMLTree"是一个广泛应用于内容管理系统(CMS)的工具。DHTMLTree插件允许开发者在网页上构建可展开/折叠的节点结构,常用于目录...
- **index.html**:可能是一个示例页面,演示了dhtmltree的基本使用方法。 - **dhtmlxTree**:可能包含dhtmltree库的JavaScript和CSS文件。 - **docsExplorer**:可能是一个文档或示例目录,帮助用户更深入地了解...
DhtmlTree是一款在Web开发中常用的树形菜单控件,主要特点是其动态性与交互性。这个组件基于JavaScript和HTML,能够实现无需刷新页面就能进行数据加载,这得益于Ajax技术的运用。Ajax(Asynchronous JavaScript and ...
1. **引入资源**:在HTML页面中,需要引入`dhtmltree`的JavaScript和CSS文件,以及可能需要的图标资源。 2. **初始化配置**:使用JavaScript代码创建树型控件,并设置基本属性,如树的ID、初始节点、异步加载配置等...
这样可以减少初次加载时的数据量,加快页面显示速度。 7. **优化与安全**:在实际应用中,可能还需要考虑性能优化,如缓存部分目录结构,避免重复请求。同时,安全问题也不容忽视,例如限制访问权限,确保用户只能...
dhtmlTREEdhtmlTREEdhtmlTREEdhtmlTREEdhtmlTREEdhtmlTREEdhtmlTREEdhtmlTREE
在Web开发中,树形控件是一种常见的UI元素,用于展示层次结构的数据,如目录结构、组织架构等。DhtmlTreea是一款基于Ajax技术的树形控件,它能够实现实时异步加载数据,提供用户友好的交互体验,无需页面刷新就能...
可将目录生成dhtmlxTree可识别的xml文件,xml文件可直接被dhtmlx读取加载!
【描述】"dhtmltree应用实例"指出该系统中可能包含了dhtmltree组件的使用。dhtmltree是一款JavaScript库,主要用于创建可交互的树形结构,通常用于展示层级关系的数据,如部门结构、项目分类等。在日报管理系统中,...
1. **dhtmltree 和 dtree**: 这两个标签可能指的是早期的JavaScript库,如dHTML Tree或DTREE,它们提供了在浏览器中创建动态树形视图的功能。dHTML Tree允许通过简单的HTML和JavaScript代码创建交互式的树形菜单,而...
根据提供的文件信息,本文将对DHTMLX Tree的相关知识点进行详细的阐述。 ### DHTMLX Tree 概述 DHTMLX Tree 是一个强大的JavaScript库的一...在未来开发过程中,合理运用这些知识点将会大大提高工作效率和项目质量。
6. **dhtmltree**:DHTMLTree是基于Dynamic HTML(DHTML)的树形菜单组件,它支持动态加载和实时更新,可以在不刷新整个页面的情况下更新树结构,提供更好的用户体验。 这些JavaScript树形菜单控件各有特点,可以...
集合了网上找到了多种类型的现成的结构树,包括dhtmltree,dtree,MzTreeView,otree,tigra_tree_menu,TreeCheckNodeUI,treePanel,xtree
其次,`servlet`是Java Web开发中的一个关键组件,它是运行在服务器端的Java程序,负责处理客户端(如浏览器)发送的请求,并返回响应。在这个场景下,`servlet`被用来从数据库中获取数据,这些数据可能是层次化的,...