JavaScript-jsp 根据数据库建立树结构菜单

JavaScript-jsp 根据数据库建立树结构菜单

泛泛之交 发布于 2017-08-20 字数 173 浏览 1152 回复 4

我已经新建立了一个javascript,可是我想通过数据库动态的建立一个树的菜单,没有显示,我用的是网上提供的dtree来做的,还请帮忙解决,谢谢。指给我大体的建立思路即可,jsp网页

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

晚风撩人 2017-10-15 4 楼

首先先从数据库中查询的数据就要按照
根节点
-节点
-子节点
-节点
-子节点1
-子节点2
. . .

这样的格式查询出来,可放入List中. List中的类型可以是Map
数据库中的数据主要的就是以下几个参数id, pid, name, 你得把你数据库中的字段起别名为这几个。这时候每条记录是一个Map, 这个Map中主要存放如下的键值id, pid, name,然后转为JSON格式就可以了。
JSONArray json = JSONArray.fromObject(list);

在javascript中可以定义一个变量来接收上面的json. 这样就OK了。

偏爱自由 2017-10-14 3 楼

我做过很多的树形菜单,总体的就是一个思路,通过父节点找子节点。如果是同步的话后台迭代获取子节点就可以了,如果是异步的话就是前台发送请求到后台拿到子节点列表。

public String getResourceTree(boolean asyn,String parentId) {
JSONArray array = new JSONArray();
List<Resource> list = new ArrayList<Resource>();
if(StringUtils.isNotEmpty(parentId)){
list = resourceDAO.get(Integer.valueOf(parentId)).getChildren();
}else{
list = resourceDAO.getRootMenu();
}

for (Resource resource : list) {
JSONObject node = new JSONObject();
node.element("id", resource.getResourceId());
node.element("text", resource.getName());
node.element("iconCls", resource.getIcon());
if (resource.getChildren().size() > 0) {
if(asyn){
node.element("state", "closed");
}else{
node.element("children", getChildResource(resource));
}
}
JSONObject attributes = new JSONObject();
attributes.element("description", resource.getDescription());
attributes.element("sort", resource.getSort());
attributes.element("type", resource.getType());
attributes.element("value", resource.getValue());
if (resource.getParent() != null) {
attributes
.element("parentName", resource.getParent().getName());
}else{
attributes.element("parentName", "系统资源");
}
node.element("attributes", attributes);
array.add(node);
}

}
public JSONArray getChildResource(Resource r) {
JSONArray array = new JSONArray();
List<Resource> list = r.getChildren();
for (Resource resource : list) {
JSONObject node = new JSONObject();
node.element("id", resource.getResourceId());
node.element("text", resource.getName());
node.element("iconCls", resource.getIcon());
if (resource.getChildren().size() > 0) {
node.element("children", getChildResource(resource));
}
JSONObject attributes = new JSONObject();
attributes.element("description", resource.getDescription());
attributes.element("sort", resource.getSort());
attributes.element("type", resource.getType());
attributes.element("value", resource.getValue());
if (resource.getParent() != null) {
attributes
.element("parentName", resource.getParent().getName());
}
node.element("attributes", attributes);
array.add(node);
}
return array;
}

这个方法就取节点的方法,参数asyn是是否是异步请求,如果是异步则不去子节点,待页面发送请求在取,如果不是异步则迭代取出子节点

归属感 2017-10-03 2 楼

树形目录,个人感觉还是ztree比较好,兼容多浏览器、支持json、可异步加载数据等等,你可以看看,官网有详尽的API和DEMO,很好用的插件。

晚风撩人 2017-09-04 1 楼

建议使用wdTree,感觉非常方便,类似

function createNode(){
var root = {
"id" : "0",
"text" : "root",
"value" : "86",
"showcheck" : true,
complete : true,
"isexpand" : true,
"checkstate" : 0,
"hasChildren" : true
};
var arr = [];
for(var i= 1;i<3; i++){
var subarr = [];
for(var j=1;j<3;j++){
var value = "node-" + i + "-" + j;
subarr.push( {
"id" : value,
"text" : value,
"value" : value,
"showcheck" : true,
complete : true,
"isexpand" : false,
"checkstate" : 0,
"hasChildren" : false
});
}
arr.push( {
"id" : "node-" + i,
"text" : "node-" + i,
"value" : "node-" + i,
"showcheck" : true,
complete : true,
"isexpand" : false,
"checkstate" : 0,
"hasChildren" : true,
"ChildNodes" : subarr
});
}
root["ChildNodes"] = arr;
return root;
}

产生格式的json就可以,你可以看看