EasyUI之tree组件与treegrid组件

Posted 2020-09-08 AnswerTheQuestion

最近做了一个使用EasyUI的基于角色的权限分配系统，在这个过程中为了有更好的用户体验（也在网上找了挺多关于该系统的界面），先上我做的截图：

其功能需求：

1.用户信息的增删改查

2.角色信息的增删改查

3.权限信息的增删改查

4.权限授予角色

5.角色赋予用户

6.角色下有用户时，该角色不能删除

7.删除某一菜单时将其子类菜单同时删除，将中间表中的对应关系删除，判断其父类下是否还有子类，如果没有将其state属性设置为open
8.界面JS

这个EasyUI的tree组件和treegrid组件，确实让我废了一大把力气》》好了废话不多说，开始正题：

一：tree组件

每个节点都具备以下属性：

• id：节点ID，对加载远程数据很重要。
• text：显示节点文本。
• state：节点状态，\'open\' 或 \'closed\'，默认：\'open\'。如果为\'closed\'的时候，将不自动展开该节点。
• checked：表示该节点是否被选中。
• attributes: 被添加到节点的自定义属性。
• children: 一个节点数组声明了若干节点。

一下是文档的示例：

EasyUI的tree接收的JSON格式：
[
    {
        id:(该数据ID)
        text:(文本)
        iconCls:(图标)
        state:(状态)
        attributes:{
            (其他自定义的属性，例如)
            url:
            }
        checked:(是否选中，true、false)
        children：[
                    {
                        id：
                        text：
                    },
                    {
                        id：
                        text：
                    }
                ]
    },

    {
        id：
        text：
    },

    {
        id：
        text：
    }
]

换言之，从后台无论你是用什么办法，传到前台的只有是上述的格式，它才会被解析！（其实有些东西确实是bug，反正我用拼接字符串的方式返回JSON到前台，浏览器的NetWork都能够正确解析，EasyUI就是不显示数据！，而当我用JSON包，一个个Put进去之后再往前台打数据的时候，神奇的事情发生了，EasyUI识别了！但浏览器的NetWork解析的数据却是一样的，其实我想说：还是以官方的东西为准吧！）

要解析成上述的格式必须用到递归（递归的方法有很多种，我在这贴一下我写的）：

因为这个项目是基于S2SH架构下的，用了Dao类的泛型注入，为了更好理解我贴一下，daoImp实现类，service实现类，action类；

daoImp实现类

@Repository("baseDao")
@SuppressWarnings("all")
public class BaseDaOImpl<T> implements BaseDao<T> {

    @Autowired
    private SessionFactory sessionFactory;

    public SessionFactory getSessionFactory() {
        return sessionFactory;
    }

    public void setSessionFactory(SessionFactory sessionFactory) {
        this.sessionFactory = sessionFactory;
    }

    private Session getCurrentSession() {
        return sessionFactory.getCurrentSession();
    }

    public List<T> find(String hql, List<Object> param) {
        Query q = this.getCurrentSession().createQuery(hql);
        if (param != null && param.size() > 0) {//like :xx
            for (int i = 0; i < param.size(); i++) {
                q.setParameter(i, param.get(i));
            }
        }
        return q.list();
    }

}

serviceImp实现类

package com.maya.serviceImp;

import java.util.LinkedList;
import java.util.List;

import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.maya.dao.BaseDao;
import com.maya.model.SysMenu;
import com.maya.service.TestService;
import com.maya.util.StringUtil;
@Service
public class TestServiceImp implements TestService {

    @Resource
    private BaseDao<SysMenu> baseDao;
    @Override
    public JSONArray getArr(Integer parentId,String authIds) {//该方法返回JSON格式的数据
        JSONArray arr=new JSONArray();
        List<SysMenu> list=getList(parentId,authIds);//首先当传进第一个父类id时，查出其父类是该id的所有子类，然后进行格式转化
        for(int i=0;i<list.size();i++){
            JSONObject obj=new JSONObject();
            obj.put("id", list.get(i).getId());
            obj.put("text", list.get(i).getAuthName());
            obj.put("iconCls",list.get(i).getIconCls());
            obj.put("attributes", new JSONObject().put("url", list.get(i).getAuthPath()));
            List<SysMenu> list2=getList(list.get(i).getId(),authIds);//判断其有无子类
            if(list2==null || list2.size()==0){
                obj.put("state", "open");
            }else{
                obj.put("state", "closed");
            }
            arr.add(obj);//将第一批的子类放进JSONArray中
        }                
        for(int j=0;j<arr.size();j++){//然后接着判断其中的的状态，（也就是判断其有误子类）
            JSONObject obj= arr.getJSONObject(j);
            if(obj.get("state").equals("closed")){//如果有的话，设置children属性其值就是再调用一下自己的父类
                obj.put("children", getArr(Integer.parseInt(obj.get("id").toString()),authIds));
            }
        }
        return arr;
    }

    @Override
    public List<SysMenu> getList(Integer parentId,String authIds) {//该方法用来获得其返回的子类集合
        List<Object> param=new LinkedList<Object>(); 
        StringBuffer hql=new StringBuffer("from SysMenu");
        if(StringUtil.getBoolean(parentId+"")){
            hql.append(" and parentId=?");
            param.add(parentId);
        }
        if(StringUtil.getBoolean(authIds)){
            String[] s=authIds.split(",");//进行数据的类型转换（方便in查询）
            Integer[] inn=new Integer[s.length];
            for(int j=0;j<s.length;j++){
                inn[j]=Integer.parseInt(s[j]);
            }
            hql.append(" and id in ?");
            param.add(inn);
        }
        List<SysMenu> list=baseDao.find(hql.toString().replaceFirst("and", "where"), param);        
        return list;
    }

}

action类

package com.maya.action;

import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import com.alibaba.fastjson.JSONArray;
import com.maya.dao.BaseDao;
import com.maya.model.SysMenu;
import com.maya.service.TestService;
import com.maya.util.ResponseUtil;
import com.opensymphony.xwork2.ActionSupport;
@Controller
public class TestUi extends ActionSupport {
    //String parentId;
    //String authIds;
    
    @Resource
    private BaseDao<SysMenu> baseDao;
    @Resource
    private TestService testService;
    
    public String find(){
        Integer parentId=-1;
        String authIds="1,2,3,4,5,6,7,8";//构造数据，这并不是这次项目的源码
        JSONArray arr=testService.getArr(parentId, authIds);        
        try {
            ResponseUtil.write(arr);
        } catch (Exception e) {
            // TODO 自动生成的 catch 块
            e.printStackTrace();
        }
        return null;
    }
}

注意：

1.因为涉及到权限，每个用户的权限不一样，那么在加载tree数据的时候就要在后面加一个in的条件。

2.tree组件的state属性：API介绍：

• state：节点状态，\'open\' 或 \'closed\'，默认：\'open\'。如果为\'closed\'的时候，将不自动展开该节点。

 反正我是没看懂是啥意思。。。。不过自己所得时候倒是总结了一下，但凡其有后代的，那么它的state属性值就是closed，反之就是open

二、TreeGrid（树形表格）

该组件是基于数据表格、组合树控件和可编辑表格。换言之datagrid和tree有的属性它都有。

使用html标签创建树形表格。在大多数情况下，树形表格遵循数据表格的结构。

1. <table id="tt" class="easyui-treegrid" style="width:600px;height:400px"  
2.         data-options="url:\'get_data.php\',idField:\'id\',treeField:\'name\'">  
3.     <thead>  
4.         <tr>  
5.             <th data-options="field:\'name\',width:180">Task Name</th>  
6.             <th data-options="field:\'persons\',width:60,align:\'right\'">Persons</th>  
7.             <th data-options="field:\'begin\',width:80">Begin Date</th>  
8.             <th data-options="field:\'end\',width:80">End Date</th>  
9.         </tr>  
10.     </thead>  
11. </table>  

同样的后台打到前台的JSON数据照样是不变。

下面是tree与treegrid的界面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
    $("#tree").tree({
        //animate:true,
        //lines:true,
        url:\'Test_find\'
        //onLoadSuccess:function(){
            //$("#tree").tree("expandAll");
    //    },
    });


        $(\'#treeGrid\').treegrid({
            url:\'Test_find\',
            onLoadSuccess:function(){
                $("#treeGrid").treegrid(\'expandAll\');
            }
        });
});

</script>
</head>
<body>
<ul id="tree"></ul>
<table id="treeGrid" title="菜单管理" class="easyui-treegrid" 
  toolbar="#tb" data-options="idField:\'id\',treeField:\'text\',fit:true,fitColumns:true,rownumbers:true">
    <thead>
        <tr>
            <th field="id" width="30" align="center">菜单编号</th>
            <th field="text" width="80">菜单名称</th>
            <th field="iconCls" width="35" align="center">图标</th>
            <th field="authPath" width="100" align="center">链接地址</th>
            <th field="authDescription" width="100" align="center">备注</th>
        </tr>
    </thead>
</table>
</body>
</html>