【转】 dhtmlxTree 10分钟做一个树
项目中要做个分类树和部门树。
架构师让用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等相关文档。
?
下面是源码
/**
? * <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>
?//下面是做好后的效果图
