基于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 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
javascript实现日期格式转换
Dec 16 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
js实现简单抽奖功能
Nov 24 Javascript
jQuery实现日历效果
Sep 11 jQuery
vue组件入门知识全梳理
Sep 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
PHP新手上路(十二)
2006/10/09 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
jquery tools之tooltip
2009/07/25 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python打造爬虫代理池过程解析
2019/08/15 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
往来会计岗位职责
2013/12/19 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
个人党性分析总结
2015/03/05 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB