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

 更新时间:2010年07月27日 08:49:40   作者:  
基于jsTree的无限级树JSON数据的转换代码,需要的朋友可以参考下。
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是菜单类或权限类等的实体。
效果图:

相关文章

  • 小程序云开发初探(小结)

    小程序云开发初探(小结)

    云开发是微信平台新开放的功能,为开发者提供集成了服务器,数据库和资源存储的云服务。这篇文章主要介绍了小程序云开发初探(小结),感兴趣的小伙伴们可以参考一下
    2018-10-10
  • HTML上传控件取消选择

    HTML上传控件取消选择

    由于<input type="file">的value属性石只读的,所以要取消选择只能通过其他途径,此处有2种方法
    2013-03-03
  • 限时抢购-倒计时的完整实例(分享)

    限时抢购-倒计时的完整实例(分享)

    下面小编就为大家带来一篇限时抢购-倒计时的完整实例(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript控制网页平滑滚动到指定元素位置的方法

    JavaScript控制网页平滑滚动到指定元素位置的方法

    这篇文章主要介绍了JavaScript控制网页平滑滚动到指定元素位置的方法,实例分析了javascript操作页面滚动的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 基于JavaScript实现简单抽奖功能代码实例

    基于JavaScript实现简单抽奖功能代码实例

    这篇文章主要介绍了基于JavaScript实现简单抽奖功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • js插件YprogressBar实现漂亮的进度条效果

    js插件YprogressBar实现漂亮的进度条效果

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
    2015-04-04
  • Immutable 在 JavaScript 中的应用

    Immutable 在 JavaScript 中的应用

    在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」
    2016-05-05
  • 使用TextRange获取输入框中光标的位

    使用TextRange获取输入框中光标的位

    使用TextRange获取输入框中光标的位...
    2006-10-10
  • 解决css和js的{}与smarty定界符冲突问题的两种方法

    解决css和js的{}与smarty定界符冲突问题的两种方法

    当输入url地址后网页出现如下文所描述的问题通常是css和js的{}与smarty定界符冲突导致的,解决方法有两个,具体如下,感兴趣的朋友可以参考下
    2013-09-09
  • Javascript设计模式理论与编程实战之简单工厂模式

    Javascript设计模式理论与编程实战之简单工厂模式

    简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况。 说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮
    2015-11-11

最新评论