基于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写的日历类(基于pj)
Dec 28 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
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 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
前端性能优化及技巧
2016/05/06 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
tensorflow常用函数API介绍
2020/04/19 Python
django 模版关闭转义方式
2020/05/14 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
出国导师推荐信
2014/01/16 职场文书
秋季运动会活动方案
2014/02/05 职场文书
岗位聘任书范文
2014/03/29 职场文书
最感人的道歉情书
2015/05/12 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js