基于jsTree的无限级树JSON数据的转换代码


Posted in Javascript onJuly 27, 2010

jstree 主页 :
http://www.jstree.com/

其中提供了一种从后台取数据渲染成树的形式:

$("#mytree").tree({ 
data : { 
type : "json", 
url : "${ctx}/user/power!list.do" 
} 
});

对于url中返回的值必须是它定义的json数据形式:
$("#demo2").tree({ 
data : { 
type : "json", 
json : [ 
{ attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [ 
{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } }, 
{ attributes: { id : "pjson_3" }, data: "Child node 2" }, 
{ attributes: { id : "pjson_4" }, data: "Some other child node" } 
]}, 
{ attributes: { id : "pjson_5" }, data: "Root node 2" } 
] 
} 
});

这里需要一个从后台实例集合转换为它规定的json数据的形式.
/** *//** 
* 无限递归获得jsTree的json字串 
* 
* @param parentId 
* 父权限id 
* @return 
*/ 
private String getJson(long parentId) 
{ 
// 把顶层的查出来 
List<Action> actions = actionManager.queryByParentId(parentId); 
for (int i = 0; i < actions.size(); i++) 
{ 
Action a = actions.get(i); 
// 有子节点 
if (a.getIshaschild() == 1) 
{ 
str += "{attributes:{id:\"" + a.getAnid() 
+ "\"},state:\"open\",data:\"" + a.getAnname() + "\" ,"; 
str += "children:["; 
// 查出它的子节点 
List<Action> list = actionManager.queryByParentId(a.getAnid()); 
// 遍历它的子节点 
for (int j = 0; j < list.size(); j++) 
{ 
Action ac = list.get(j); 
//还有子节点(递归调用) 
if (ac.getIshaschild() == 1) 
{ 
this.getJson(ac.getParentid()); 
} 
else 
{ str += "{attributes:{id:\"" + ac.getAnid() 
+ "\"},state:\"open\",data:\"" + ac.getAnname() 
+ "\" " + " }"; 
if (j < list.size() - 1) 
{ 
str += ","; 
} 
} 
} 
str += "]"; 
str += " }"; 
if (i < actions.size() - 1) 
{ 
str += ","; 
} 
} 
} 
return str; 
}

调用:
@org.apache.struts2.convention.annotation.Action(results = 
{ @Result(name = "success", location = "/main/user/action-list.jsp") }) 
public String list() 
{ 
String str = "["; 
// 从根开始 
str += this.getJson(0); 
str += "]"; 
this.renderJson(str); 
return null; 
}

其中Action是菜单类或权限类等的实体。
效果图:
基于jsTree的无限级树JSON数据的转换代码
Javascript 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
js脚本实现数据去重
Nov 27 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
XENON基于JSON变种
Jul 27 #Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 #Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 #Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 #Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 #Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 #Javascript
jQuery getJSON 处理json数据的代码
Jul 26 #Javascript
You might like
accesskey 提交
2006/06/26 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Python的Django框架下管理站点的基本方法
2015/07/17 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python对象与引用的介绍
2019/01/24 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
由面试题加深对Django的认识理解
2019/07/19 Python
如何在Python对Excel进行读取
2020/06/04 Python
质量月活动总结
2014/08/26 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
趣味运动会开幕词
2015/01/28 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
导游词之包公祠
2019/11/25 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL