您的位置：首页 > Web前端 > JavaScript

如何使用dhtmlxtree 和Json 数据格式创建和使用一棵tree

2014-02-04 09:54 656 查看

（声明：本人只是个不起眼的小菜鸟，若哪里有疏忽或者出错的地方还请各位海涵并且帮忙改正,最主要希望自己的学习中遇到的问题能很好的帮助你们）

先简单介绍下dhtmlxtree:

dthmlxTree是一个功能丰富的第三方JavaScript树菜单，它能够使用户快速添加一个外观非常漂亮的，基于Ajax技术的网页上的分层树。树视图支持在线节点编辑、现行的拖放功能、三态复选框以及更多功能。

效果模型展示：

依赖的Jar包：dom4j-1.6.1.jar

依赖的js: dhtmlxcommon.js dhtmlxtree.js
dhtmlxtree_json.js

Json:(JavaScript Object Notation) 是一种轻量级的数据交换格式,详细介绍请看：Json介绍

主要说明下Json使用的数据格式：

第一种：名称 / 值对：{
"firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

第二种：表示数组：

本文tree的显示使用的格式如下：

好了，上面的数据格式为了创建一棵树所用到的Json数据格式，,如果你看懂了，接下来就好做了。

步骤：

第一步：导包

第二步：在Jsp页面里创建一个div用来显示树的地方

<div id="treeboxbox_tree2" style="width: 250px; height: 218px; background-color: #fffff5; border: 1px solid Silver;"></div>

第三步：

a:Action类里查询出所需的数据，（Dao,DaoImpl和Service层得写个查询方法吧）

b:把查询的数据拼接成上面的Json数据格式，(使用StringBuffer或者StringBuilder的append()方法拼接，这俩使用哪个都行，StringBuilder效率最高)

c:使用toString()方法转换成String类型

d:放到ActionContext中

拼接方法示例：

List<Column> list = this.roleManageService.getParentNode();
StringBuilder sb = new StringBuilder();
sb.append("{id:\"0\",text:\"根\", item:[");
for (int i = 0; i < 6; i++) {
Column col = list.get(i);
if (i > 0) {
sb.append(",");
}
sb.append("{id:\"" + col.getId() + "\",text:\"" + col.getName()
+ "\"");
Set<Column> subs = col.getChilds();
if (subs != null && subs.size() > 0) {
sb.append(",item:[");
int j = 0;
for (Column sub : subs) {
if (j++ > 0) {
sb.append(",");
}
String subId = col.getId() + "-" + sub.getId();
sb.append("{id:\"" + subId + "\",text:\"" + sub.getName()
+ "\"");
Set<Privilege> privs = sub.getPrivileges();
if (privs != null && privs.size() > 0) {
sb.append(",item:[");
int k = 0;
for (Privilege priv : privs) {
if (k++ > 0) {
sb.append(",");
}
sb.append("{id:\"f-" + sub.getId() + "-"
+ priv.getId() + "\",text:\""
+ priv.getName() + "\"}");
}

sb.append("]");
}
sb.append("}");
}
sb.append("]");
}
sb.append("}");
}
sb.append("]}");
sb.toString();

e:在Jsp<Head>标签里引入必要的Js和css:

<head>

<script src="${ctx}/dhtmlxtree/dhtmlxcommon.js"></script>
<script src="${ctx}/dhtmlxtree/dhtmlxtree.js"></script>
<script src="${ctx}/dhtmlxtree/dhtmlxtree_json.js"></script>
<link rel="stylesheet" type="text/css"
href="${ctx}/dhtmlxtree/dhtmlxtree.css" />

<script type="text/javascript">
$(function(){
var tree2 = new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
tree2.setImagePath("${ctx}/dhtmlxtree/csh_vista/");
tree2.enableCheckBoxes(1);
tree2.enableThreeStateCheckboxes(true);
//tree2.loadXML("${ctx}/dtree/tree3.xml");
//用EL表达式获取json数据
var json = ${json};
tree2.loadJSONObject(json);
});
</script>

</head>

这样一棵树就能显示出来了。
注意：树显示不出来的原因可能有以下几点：
1：div 没有id
2：数据格式没有拼对，多打断点，查看最后拼接的字符串是否是想要的Json数据格式，或者百度搜索Json在线解析，然后把断点获得字符串复制，就能进行检查了，这个最方便，点击进入：JSon在线解析
3：还有就是引入js的顺序，我在实现的时候这几个问题都遇到过

好啦，恭喜你树已经出来了,那么欲知在后台如何获取到前台显示树的id请看下一篇文档。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： json dhtmlxtree

相关文章推荐

新的分享

章节导航