日期:2014-05-17 浏览次数:20587 次
项目中要做个分类树和部门树。
架构师让用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;