使用easyUI的Tree实现授权功能

来源：互联网发布：暖气片知乎编辑：程序博客网时间：2024/04/30 03:50

在做权限管理的时候遇到了一些问题，关于权限的树形结构本来可以有很多选择，但是当时一直使用easyUI所以还是选择了她的Tree结构，在坚信吃的屎多了自然人就会聪明的信条下终于还是给搞出来了。所以记录一下。

我觉得有必要介绍一下，easyUI的属性控件展示的方式有好几种，一种是静态的。一种是通过js动态加载，我使用的异步的加载。

在这之前我要介绍一下自己的表结构，就是普通的rbac： t_user，t_user_role，t_role，t_role_permission，t_permission

1.声明一个tree

<ul id="tt" class="easyui-tree" checkbox="true"></ul>

其中checkbox指的是否是那种单选的那种tree，看，有这两种
这里写图片描述

2.因为是要进行权限管理，所以需要选中当前行，获取当前角色对象，而且重新打开这个tree。
这里写图片描述

对，就是这个样子。
这个是body中加入的一个窗口

<div id="menuWindow" class="easyui-window" title="My Window" closed="true" style="width:300px;height:400px;padding:5px;">        <ul id="tt" class="easyui-tree" ></ul>        <br />        <input type="button" value="authority" onclick="getChecked()"/>    </div>

这个是js代码：

function authority(){            var row = $('#dg').datagrid('getSelected');             $('#tt').tree({                  url : "loadmenu?roleid="+row.id,                lines : true,                  checkbox : true               <%-- onLoadSuccess : function(node, data){                    for(var i=0;i<data.length;i++){                        alert(data[i].checked);                    }                }--%>            });

这里只要你返回的json数据格式符合要求，那么他就会给你展示出来，onLoadSuccess : function(node, data){}表示的当成功加载到数据的时候进行的方法。

3.数据格式
既然说到了数据格式只要符合他的标准，那么我们看文档的时候就会发现他需要的什么样的数据格式。这里我直接将我包装起来的EasyUITree拿出来。

public class EasyUITree {    public static String STATE_OPEN = "open";     public static String STATE_CLOSED = "closed";     private Integer id;     private String text;     private boolean checked;     private String state = STATE_OPEN;     private String attributes;     private List<EasyUITree> children;     public EasyUITree() {         this(null, null, STATE_OPEN);     }     public EasyUITree(Integer id, String text) {         this(id, text, STATE_OPEN);     }     public EasyUITree(Integer id, String text, String state) {         this.id = id;         this.text = text;         this.state = state;         this.children = new ArrayList<EasyUITree>();     }    //setget方法省略}

text是内容，
checked是是否选中，
attributes是追加一个自定义属性，
state这个属性、当他为open时、说明这个节点是个文件夹、会以文件夹的形式显示，当他是closed的时候、说明这个节点是一个具体的文件节点、不会以文件夹的形式显示。

这里：我将从数据库中查到的权限信息进行再次封装到easyUITree里面。这样返还回去之后就可以直接进行显示了。

4.如何查询权限信息，并将其封装

这里需要查询两部分数据，一个是所有的权限信息结构，一个是当前角色的权限信息结构。
a)查询权限信息

mapper接口

public interface PermissionMapper {public List<Permission> findByRoleId(int uid);public List<Permission> findAll();}mapper.xml<select id="findByRoleId" parameterType="int" resultType="cn.zwq.vo.Permission">    select * from t_permission where id in (    select pid from t_role_permission where rid = #{rid})</select><select id="findAll" resultType="cn.zwq.vo.Permission">    select * from t_permission</select>

PermissionService 接口我就不写了

serviceimpl.java

@Service("permissionService")public class PermissionServiceImpl implements PermissionService{    @Autowired    private PermissionMapper permissionMapper;    public List<Permission> findByRoleId(int roleId) {        return MenuUtil.getMenu(permissionMapper.findByRoleId(roleId));    }    public List<Permission> findAll() {        return MenuUtil.getMenu(permissionMapper.findAll());    }}

b）进行封装
这里我直接贴出来这个permission的属性

    private int id;    private String name;    private String url;    private int orderNo;    private int pid;    private String type;    private String percode;    private String pids;    private List<Permission> children = new ArrayList<Permission>();

我利用工具类直接将permission存在了一个list中

public class MenuUtil {    public static List<Permission> getMenu(List<Permission> list){        Map<Integer,Permission> map = new HashMap<Integer,Permission>();        for(Permission p:list){            if(p.getPid()==0){                map.put(p.getId(), p);            }        }        for(Permission p:list){            if(p.getPid()==0){                continue;            }            Permission permission = map.get(p.getPid());            permission.getChildren().add(p);        }        //将菜单装在list里面了。需要排序        List<Permission> menus = new ArrayList<Permission>();        Iterator<Permission> iter = map.values().iterator();        while(iter.hasNext()){            menus.add(iter.next());        }        Collections.sort(menus);        for(Permission sp:menus){            Collections.sort(sp.getChildren());        }        return menus;    }}

5.在控制器中将它再封装到easyUITree中

@RequestMapping("/loadmenu")    @ResponseBody    public List<EasyUITree> loadMenu(Integer roleid){        //findByRoleId(roleid)获取当前角色权限,并为其selected        List<Permission> chekedList = permissionService.findByRoleId(roleid);        //从数据库中查询的保存tree的集合、比如id、父类id、text等等、可自己扩展          List<Permission> list = permissionService.findAll();          List<EasyUITree> eList = getEasyUITreeList(list,chekedList);          return eList;    }    private List<EasyUITree> getEasyUITreeList(List<Permission> list,List<Permission> chekedList) {        //用于前台显示的tree的属性、比如id、state、text、checked等等          List<EasyUITree> eList = new ArrayList<EasyUITree>();          Map<Integer,EasyUITree> eMap = new HashMap<Integer,EasyUITree>();        if(list.size() != 0){              for(Permission p : list){                  EasyUITree e = new EasyUITree();                  e.setId(p.getId());                 e.setText(p.getName());                  //e.setChecked(true);                //e.setAttributes(p.getUrl());  为元素追加一个自定义属性                int count = p.getChildren().size();                 if(count > 0){                      for(Permission pchild:p.getChildren()){                        EasyUITree echild = new EasyUITree();                        echild.setId(pchild.getId());                        echild.setText(pchild.getName());                        //echild.setChecked(true);                        //echild.setAttributes(pchild.getUrl());                        e.getChildren().add(echild);                    }                }                  eMap.put(e.getId(), e);            }             for(Permission p : chekedList){                  EasyUITree e = new EasyUITree();                  e.setId(p.getId());                 e.setText(p.getName());                  e.setChecked(true);                int count = p.getChildren().size();                 if(count > 0){                      for(Permission pchild:p.getChildren()){                        EasyUITree echild = new EasyUITree();                        echild.setId(pchild.getId());                        echild.setText(pchild.getName());                        echild.setChecked(true);                        e.getChildren().add(echild);                    }                }                  eMap.put(e.getId(), e);            }         }        eList.addAll(eMap.values());        return eList;    }

6.喝口水，将选中的权限信息返回后台处理

js代码

function getChecked(){                var nodes = $('#tt').tree('getChecked');//获取:checked的结点.                var s = '';                for(var i=0; i<nodes.length; i++){                        if (s != '') s += ',';                        s += nodes[i].id;//例如:菜单的menuID                }                //alert(s);                var row = $('#dg').datagrid('getSelected');                $.post("changeAuthority",{                    ids:s,                    roleId:row.id,                },function(data){                    if(data){                        $("#menuWindow").window("close");                    };                });        }

这里往后我就不写了。哈哈哈哈哈哈哈

3 1