基于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是菜单类或权限类等的实体。
效果图:

(0)

相关推荐

  • 基于jstree使用JSON数据组装成树

    概述: 前面主要是html数据,这里主要是json数组 1.格式 jsTree需要一个具体格式JSON数据,在标准的语法没有那个字段是必须的-而是那些是你需要的.请记住你可以获取任何你请求的其他属性,jsTree将会不会碰他们,你将有可能在随后使用它们. 为了改变节点的图标你可以是用属性icon.具体的字符串需要包含/的一个图片的url路径,你可以使用任何其它字符串应用类样式去修饰<i>元素,它将会被用呈现这个图标.你可以使用boolean 值false来jsTree在渲染节点时没有图标. 你

  • jsTree树控件(基于jQuery, 超强悍)[推荐]

    1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example

  • jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • jsTree 基于JQuery的排序节点 Bug

    例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助

  • JQery jstree 大数据量问题解决方法

    问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re

  • jquery下jstree简单应用 - v1.0

    第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j

  • jsTree事件和交互以及插件plugins详解

    本文为大家分享了jsTree事件和交互以及插件plugins,供大家参考,具体内容如下 1.事件 jsTree在容器中触发变量事件,你可以浏览所有事件,然后了解如何进行监听:https://www.jstree.com/api/#/?q=.jstree%20Event 通过data参数获取更多详细信息关于事件检查. 更多情况下就是你会得到所有节点对象,如果你通过ID获取这个节点,查看节点使用.get_node(). $('#jstree') // listen for event .on('ch

  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示

  • 基于jstree使用AJAX请求获取数据形成树

    概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,

随机推荐