作者：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确实让我非常受伤啊。还是在调试的时候太过急躁，归根结底还是技术积累。
# 为将之道,当先治心,泰山崩于前而色不变,麋鹿兴于左而目不瞬。共勉！ #
版权声明：本文为博主原创文章，未经博主同意不得转载。
- 本文已收录于下面专栏：
内容举报
返回顶部
收藏助手
不良信息举报
浙公网安备 33010602011771号