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是菜单类或权限类等的实体。
效果图:
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数据
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于jsTree的无限级树JSON数据的转换代码”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 《披萨塔,Pizza Tower》基础攻略 简述+配置+下载
- 中唱唱片群星《好歌珍藏-母爱·亲情》2CD[WAV+CUE]
- 中唱唱片群星《好歌珍藏-大地飞歌》2CD[WAV]
- 金海心-那么骄傲[WAV]
- 数毛社分析PS5 Pro规格:GPU主频高达2.35GHz
- 《死侍3》新正片片段:狼叔被死侍硫酸脸恶心到了
- 《地狱潜者2》CEO赞扬社区玩家:你们的意志与合作力让我印象深刻
- 张学友 歌神《等风雨经过3CD》[WAV+CUE][2GB]
- 华语流行《周杰伦 2022最伟大的作品》[FLAC/分轨][1.7GB]
- 孙燕姿《No. 13作品 跳舞的梵谷》[WAV+CUE][400MB]
- 张心柔.2012-吟游诗人【禾广娱乐】【FLAC分轨】
- 关淑怡.1991-恋一世的爱【宝丽金】【WAV+CUE】
- 群星.2010-我的舞台·2010快乐男声【天娱传媒】【WAV+CUE】
- 崩坏星穹铁道最新5月兑换码汇总 崩铁2024年兑换码分享
- 崩坏星穹铁道椒丘是男还是女 崩铁椒丘性别介绍