easyui tree后台传json处理问题

一、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;
    }

  结果:

⑥数据库部分设计

时间: 2024-10-09 07:54:36

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

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

问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById("uuid").value; var idCard = document.getElementById("idCard").value; alert(uuId+idCard); // var result = new Object(); // result.uuId = uuI

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

前台 1 function BMSure() { 2 var DanWeiName = $("[id$='BusinessName']").val(); 3 var Address = $("[id$='Address']").val(); 4 if ((DanWeiName != "") && (Address != "")) { 5 var planGuid = $("[id$='hid_plan

c#前台向后台传Json类型的数据

JSON.stringify(postdata) var ThesisData = ko.toJS(viewModel.loadData()); ; //后台 var obj = JsonConvert.DeserializeObject(userinfos); JArray ja = new JArray(); if (obj is JArray) { ja = JsonConvert.DeserializeObject<JArray>(userinfos); } else { ja = J

EasyUI Tree后台数据初始化(LINQ操作)

控制器: 1 /// <summary> 2 /// 树初始化 3 /// </summary> 4 /// <returns></returns> 5 [HttpPost] 6 public ContentResult InitTree() 7 { 8 List<TestModel> items = bll.GetTreeFormList(); 9 Action<TestModel> SetChildren = null; 10 /

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

后台传JSON 1 public class CourseType : IHttpHandler 2 { 3 Epoint.PeiXun.Bizlogic.BLL.CourseLibrary.PX_CourseType.B_PX_CourseType b_coursetype = new Epoint.PeiXun.Bizlogic.BLL.CourseLibrary.PX_CourseType.B_PX_CourseType(); 4 5 List<CourseTypeData> list_

EasyUI tree读取sql server的表结构得到json格式

本来项目需要一个tree的树结构,后来随便选择了一个easyUI tree开源框架,后来碰到一个问题,我是要从数据库递归出结构的,转成json的,怎么做?难道是递归了拼接StringBuilder?要是这样做就太傻了,当时也打算这么做.然后各种百度,博客园,QQ群去问,回答的也是五花八门,没人给我指点详细的,我只好自己琢磨了. 第一:递归数据库的表. 第二:序列化最后的递归结果. 这里是我的数据库的表: 然后下面是代码: 这里需要建立一个实体类,类的属性跟数据库表的一样,只是多了一个泛型属性,是

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

原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.html 一.扩展原因 ztree使用了一种扁平化的数据加载方式,就是id(自身id),pid(父id)的方式,参考http://www.ztree.me/v3/demo.php#_102,于是扩展easyui tree 也使用这种亲民的方式: 二.基本方法 1,载入扩展文件 2,在JS中实例化TRE

传json数据到后台

举例: //json数据 var regdata = { Event : 'event', RegForm : [] }; //添加数据 regdata.RegForm.push({Key: yourKey, Value: yourValue}); //传json数据到后台 Ext.data.JsonP.request({ url : yourUrl, params : {data: Ext.JSON.encode(regdata)}, success: function(result){ co

easyui tree 模仿ztree 使用扁平化加载json

参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.html 一.扩展原因 ztree使用了一种扁平化的数据加载方式,就是id(自身id),pid(父id)的方式,参考http://www.ztree.me/v3/demo.php#_102,于是扩展easyui tree 也使用这种亲民的方式: 二.基本方法 1,载入扩展文件 2,在JS中实例化TREE 三.具体方法(easyui1.4.1下测试可用) 1,载入扩展JS //作者孙宇 //自定义l