一、tree json格式

[
{
"id": 1,
"text": "权限管理",
"iconCls": "icon-feed",
"checked": false,
"attributes": {
"url": "#123"
},
"children": [
{
"id": 2,
"text": "用户管理",
"iconCls": "icon-users",
"checked": false,
"attributes": {
"url": null
},
"state": null },
{
"id": 3,
"text": "角色管理",
"iconCls": "icon-users",
"checked": false,
"attributes": {
"url": null
},
"children": [
{
"id": 10,
"text": "角色管理1",
"iconCls": "icon-users",
"checked": false,
"attributes": {
"url": null
},
"state": null }
],
"state": null },
{
"id": 4,
"text": "菜单管理",
"iconCls": "icon-users",
"checked": false,
"attributes": {
"url": "#222"
},
"state": null,
"children":[]
//注意这里的state值设置很关键,若为父节点,state="open"|"close",若为叶子节点,只能为空
//否则出错,如图①
}
] },
{
"id": 5,
"text": "系统模块",
"iconCls": "icon-feed",
"checked": false,
"attributes": {
"url": null
},
"state": null
},
{
"id": 6,
"text": "系统模块2",
"iconCls": "icon-feed",
"checked": false,
"attributes": {
"url": null
} },
{
"id": 7,
"text": "系统模块3",
"iconCls": "icon-feed",
"checked": false,
"attributes": {
"url": null
} },
{
"id": 8,
"text": "系统模块4",
"iconCls": "icon-feed",
"checked": false,
"attributes": {
"url": null
} },
{
"id": 9,
"text": "系统模块5",
"iconCls": "icon-feed",
"checked": false,
"attributes": {
"url": null
} }
]

  

    如图①

正确的图是

二、tree加载方式

1、html格式

<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>

  

2、加载json文件,如tree_data.json,内容如上
<ul id="tt"></ul>
$('#tt').tree({
url:'tree_data.json'
});

3、从后台数据库传json字符串值
①实体类
②tree json格式对应的实体类
③实体类Menu转化为TreeNode格式(tree json格式),进行递归调用返回树形菜单
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import sys.entity.Menu;
public class TreeNodeUtil {
public static List<TreeNode> tree(List<TreeNode>nodes,Integer id) {
//递归转化为树形
List<TreeNode> treeNodes=new ArrayList<TreeNode>();
for(TreeNode treeNode : nodes) {
TreeNode node=new TreeNode();
node.setId(treeNode.getId());
node.setText(treeNode.getText());
node.setAttributes(treeNode.getAttributes());
node.setIconCls(treeNode.getIconCls());
node.setState(treeNode.getState());
node.setPid(treeNode.getPid());
if(id==treeNode.getPid()){
node.setChildren(tree(nodes, node.getId()));
treeNodes.add(node);
} }
return treeNodes;
}


//转化为TreeNode节点
public static TreeNode toNode(Menu menu){
TreeNode node=new TreeNode();
node.setId(menu.getId());
node.setIconCls(menu.getIcon());
node.setPid(menu.getParentMenuId());
System.out.println(node.getPid());
node.setText(menu.getMenuName());
node.setState(menu.getState());
Map<String,Object>attributes=new HashMap<String,Object>();
attributes.put("url", menu.getUrl());
node.setAttributes(attributes);
return node;
}
public static List<TreeNode>toListNode(List<Menu>menus){
List<TreeNode>nodes=new ArrayList<TreeNode>();
for(Menu menu:menus){
nodes.add(toNode(menu));
}
return nodes;
}
}

  

④查询出需要的菜单记录,我这里是权限管理系统,一个角色对应多个菜单,通过角色id查询出菜单记录,一个用户有多个角色,所以多个角色对应的菜单可能有交集,这里采用rbac的白名单权限,获得最大的菜单权限。

@Override
public List<Menu> getMenuByRoleId(Integer[] roleIds) {
List<Menu>menus=new ArrayList<Menu>();
for(Integer roleId:roleIds){
List<Menu>menus1=menuMapper.selectByRoleId(roleId);
for(Menu menu:menus1){
if(!menus.contains(menu)){
menus.add(menu);
}
}
}
return menus;
}

  

⑤controller层代码
@ResponseBody
@RequestMapping(value="treeView")
public List<TreeNode> treeView(@RequestParam("roleIds")String roleIdStr){
String param[]=roleIdStr.split(",");
Integer[] roleIds=new Integer[param.length];
for(int i=0;i<param.length;i++){
roleIds[i]=Integer.parseInt(param[i]);
}
List<Menu>menus=menuService.getMenuByRoleId(roleIds);
List<TreeNode>nodes=TreeNodeUtil.toListNode(menus);
List<TreeNode>treeNodes=TreeNodeUtil.tree(nodes, 0);
for(TreeNode node:nodes){
System.out.println(node.getIconCls());
System.out.println(node.getPid());
}
return treeNodes;
}

  结果:

⑥数据库部分设计

easyui tree后台传json处理问题的更多相关文章

  1. ajax往后台传json格式数据报415错误

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById(&quo ...

  2. 前台给后台传JSON字符串,后台解析并保存

    前台 function BMSure() { var DanWeiName = $("[id$='BusinessName']").val(); var Address = $(& ...

  3. 后台给前台传JSON字符串,前台解析并拼接显示

    后台传JSON public class CourseType : IHttpHandler { Epoint.PeiXun.Bizlogic.BLL.CourseLibrary.PX_CourseT ...

  4. 从数据库读取数据并动态生成easyui tree构结

    一. 数据库表结构 二.从后台读取数据库生成easyui tree结构的树 1.TreeNode树结点类(每个结点都包含easyui tree 的基本属性信息) import java.io.Seri ...

  5. .Net Mvc 返回Json,动态生成EasyUI Tree

    最近做一个项目,开始接触EasyUI,感觉很强大,很适合我这种对前台不是很感冒的人.在学习Tree的过程中,感觉网上的资料挺乱的,很多只是把EasyUI API 抄了一遍.现在把最近这段时间的学到的, ...

  6. [转]easyui tree 模仿ztree 使用扁平化加载json

    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...

  7. 解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题)

    解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的 ...

  8. Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。

    yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...

  9. 前台的js对象数组传到后台处理。在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>

    前台的js对象数组传到后台处理.在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>

随机推荐

  1. iOS 第三方库(1)

    MKNETWORK 被广泛使用的第三方网络访问开源库.用于提供更加友好的网络访问接口.相信很多搞iOS开发的朋友都用过它 RegexKit RegexKit是一个正则表达式工具类.提供强大的正则表达式 ...

  2. [GeekBand] C++ 内存分布—— new和delete重载的实现及分析

    本文参考文献:GeekBand课堂内容,授课老师:侯捷 :深度探索C++对象模型(侯捷译) :网络资料: http://www.leavesite.com/geekband-cpp-5.html ht ...

  3. CodeBlocks 配色方案设置

    最终效果(官方sublime修改版) 官方配色 codeblocks是一个功能很强大编程软件,我们在安装codeblocks后软件默认的是白底黑字界面,这种界面在长时间写代码时会对眼睛造成很大伤害,增 ...

  4. 关于生命周期里执行setState

    React里生命周期的哪些方法里可以执行setState,这对于很多使用React很长时间的开发都是个迷惑的问题. 先看一下完整的生命周期. 再看两篇文章 React componentDidUpda ...

  5. 项目中碰到的ExceptionInInitializerError异常

    背景 之前在集成第三方即时通信系统-融云的时候,我直接clone它的服务端源码,然后导入我的项目,我在测试它连接融云服务器案例时,发现一直不成功,始终报一个 ExceptionInInitialize ...

  6. poj1639 Picnic Planning,K度限制生成树

    题意: 矮人虽小却喜欢乘坐巨大的轿车,车大到能够装下不管多少矮人.某天,N(N≤20)个矮人打算到野外聚餐.为了集中到聚餐地点,矮人A 要么开车到矮人B 家中,留下自己的轿车在矮人B 家,然后乘坐B ...

  7. java 保存和读取本地json文件

    保存数据到本地文件 private void saveDataToFile(String fileName,String data) { BufferedWriter writer = null; F ...

  8. How to configure spring boot through annotations in order to have something similar to <jsp-config> in web.xml?

    JSP file not rendering in Spring Boot web application You will need not one but two dependencies (ja ...

  9. vue 使用ztree

    1 全局引入jquery , 不明白的看我上一个的随笔 , 特别简单 2 我没有封装组件 , 项目里面这个效果的只用了一次 , 没有必要 在你的<script>标签下面引入这俩东西 , 前 ...

  10. Latex 琐碎

    χ(\chi),Ξ(\Xi),ξ(\xi) 0. 加颜色 x2+y2=z2({\color{Red} {x^2+y^2=z^2}}) Magenta, Cyan, Emerald(宝石绿) 1. 斜杠 ...