一、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;
}
結果：
⑥數據庫部分設計
