# easyui-admin

**Repository Path**: muyu-chengfeng/easyui-admin

## Basic Information

- **Project Name**: easyui-admin
- **Description**: Spring Boot + JQuery版EasyUI前端框架实现的管理系统项目
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 6
- **Created**: 2024-06-20
- **Last Updated**: 2026-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# easyui-admin

## 一、项目介绍

Spring Boot + JQuery版EasyUI前端框架实现的管理系统项目。



## 二、技术介绍

### 1、后端技术

| 技术         | 说明             | 官网                                      |
| ------------ | ---------------- | ----------------------------------------- |
| Redis        | 分布式缓存数据库 | https://redis.io/                         |
| Knife4j      | 接口文档生成工具 | https://doc.xiaominfo.com/                |
| MyBatis      | ORM框架          | https://blog.mybatis.org/                 |
| Fastjson     | 序列化工具       | https://github.com/alibaba/fastjson       |
| Easy Excel   | 操作excel的工具  | https://easyexcel.opensource.alibaba.com/ |
| Spring Boot  | 容器+MVC框架     | https://spring.io/projects/spring-boot    |
| MyBatis-Plus | MyBatis增强工具  | https://www.baomidou.com/                 |
| Apache Shiro | 认证和授权框架   | https://shiro.apache.org/                 |



### 2、前端技术

| 技术           | 说明         | 官网                          |
| -------------- | ------------ | ----------------------------- |
| JQuery版Easyui | 前端UI框架   | https://www.jeasyui.cn/       |
| JQuery         | Javascript库 | https://jquery.com/           |
| HTML           | 网页编程语言 | https://html.com/             |
| CSS            | 网页样式语言 | https://www.w3.org/Style/CSS/ |



## 三、功能介绍

### 1、数据过滤

基于easyui的js插件实现的表格数据过滤功能。



#### 第一步

在页面引入easyui目录下的datagrid-filter.js

```html
<script type="text/javascript" src="/easyui/datagrid-filter.js"></script>
```



#### 第二步

在渲染数据网格datagrid（easyui表格）时指定两个选项，通过enableFilter方法设置哪些列需要开启过滤功能。

```js
const datagrid = $(selector).datagrid({
    // 其他选项...
    remoteFilter: true, // 开启远程过滤
    clientPaging: false, // 关闭客户端分页
});

datagrid.datagrid("enableFilter", [{
    field: "name", // 表格字段名
    type: "textbox", // 组件类型名称
    operator: ["equal", "contains"] // 展示的过滤选项
}]);
```



#### 实现原理

easyui datagrid组件的remoteFilter选项设置为true时，当使用过滤功能时，请求的URL会携带一个filterRules参数。

filterRules参数的格式是一个json数组的字符串，后端通过Spring的转换器将其转为`List<FilterRule>`类型。

然后通过Pager类的getQueryWrapper()方法统一处理过滤的请求参数，并设置到QueryWrapper查询条件中。

```java
/**
 * 根据Pager创建QueryWrapper对象
 * @param pager Pager
 * @return QueryWrapper<T>
 */
public static <T> QueryWrapper<T> getQueryWrapper(Pager<T> pager, boolean enableSort) {
    QueryWrapper<T> queryWrapper = new QueryWrapper<>();

    List<FilterRule> filterRules = pager.getFilterRules();

    if (CollectionUtils.isNotEmpty(filterRules)) {
        for (FilterRule filterRule : filterRules) {
            // 字段名：转为小写字母+下划线的格式
            String field = StringUtils.toLower(filterRule.getField());
            // 字段值
            String value = filterRule.getValue();

            if (StringUtils.isNotEmpty(value)) {
                switch (filterRule.getOperator()) {
                    case less:
                        queryWrapper.lt(field, value);
                        break;
                    case equal:
                        queryWrapper.eq(field, value);
                        break;
                    case greater:
                        queryWrapper.gt(field, value);
                        break;
                    case notequal:
                        queryWrapper.ne(field, value);
                        break;
                    case lessorequal:
                        queryWrapper.le(field, value);
                        break;
                    case greaterorequal:
                        queryWrapper.ge(field, value);
                        break;
                    case beginwith:
                        queryWrapper.likeLeft(field, value);
                        break;
                    case endwith:
                        queryWrapper.likeRight(field, value);
                        break;
                    case contains:
                        queryWrapper.like(field, value);
                        break;
                    default:
                        break;
                }
            }
        }
    }

    if (enableSort) {
        // 得到order by语句
        String statement = getOrderByStatement(pager);

        if (StringUtils.isNotEmpty(statement)) {
            queryWrapper.last(statement);
        }
    }

    return queryWrapper;
}
```

详情参考文件/js/menu_list.js和MenuServiceImpl类的selectByPage()方法。

```
cn.edu.sgu.www.easyui.service.impl.MenuServiceImpl#selectByPage()
```



##### FilterRule.java

根据filterRules参数的数据格式封装的实体类。

```java
package cn.edu.sgu.www.easyui.support;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.io.Serializable;

/**
 * 过滤规则
 * @author 沐雨橙风ιε
 * @version 1.0
 */
@Data
@ApiModel
public class FilterRule implements Serializable {
    private static final long serialVersionUID = 18L;

    /**
     * 字段名
     */
    @ApiModelProperty(value = "字段名")
    private String field;

    /**
     * 字段值
     */
    @ApiModelProperty(value = "字段值")
    private String value;

    /**
     * 比较符
     */
    @ApiModelProperty(value = "比较符")
    private Operator operator;
}
```



##### Operator.java

根据filterRules参数的operator字段封装的枚举类。

```java
package cn.edu.sgu.www.easyui.support;

/**
 * 比较符
 * @author 沐雨橙风ιε
 * @version 1.0
 */
public enum Operator {
    /**
     * 包含
     */
    contains,
    /**
     * 等于
     */
    equal,
    /**
     * 不等于
     */
    notequal,
    /**
     * 以...开始
     */
    beginwith,
    /**
     * 以...结尾
     */
    endwith,
    /**
     * 小于
     */
    less,
    /**
     * 小于或等于
     */
    lessorequal,
    /**
     * 大于
     */
    greater,
    /**
     * 大于或等于
     */
    greaterorequal
}
```



##### StringToListOfFilterRuleConverter.java

将filterRules参数转为FilterRule类型集合的Spring转换器。

```java
package cn.edu.sgu.www.easyui.converter;

import cn.edu.sgu.www.easyui.support.FilterRule;
import com.alibaba.fastjson.JSON;
import org.springframework.core.convert.converter.Converter;
import org.springframework.lang.NonNull;
import org.springframework.stereotype.Component;

import java.util.List;

/**
 * String ==> List<FilterRule>的转换器
 * @author 沐雨橙风ιε
 * @version 1.0
 */
@Component
public class StringToListOfFilterRuleConverter implements Converter<String, List<FilterRule>> {

    @Override
    public List<FilterRule> convert(@NonNull String source) {
        return JSON.parseArray(source, FilterRule.class);
    }

}
```



### 2、权限控制

基于RBAC模型实现的访问控制功能，通过一个过滤器PermsFilter完成鉴权。

```java
@see cn.edu.sgu.www.easyui.shiro.filter.PermsFilter
```



### 3、菜单管理

- 通过role_menu表实现：基于角色的菜单管理功能，菜单直接分配给角色；

- 通过user_menu表实现：用户可以自定义展示哪些菜单，勾选则代表显示，取消勾选则隐藏
    - 实现了在用户的角色菜单的基础上的个性化设置

![](doc/文档图片/用户菜单控制.png)



### 4、隐藏表格列

支持隐藏列的**记忆**功能，下次打开页面，之前操作设置隐藏的列不会显示在表格中（基于localStorage存储）。



#### 第一步

在需要使用隐藏列功能的页面中引入classpath下的/js/columnMenu.js

```html
<script type="text/javascript" src="/js/columnMenu.js"></script>
```



#### 第二步

给表格头部添加鼠标右键点击事件

```js
onHeaderContextMenu: function(e){
    e.preventDefault();

    if (!columnMenu){
        createColumnMenu("#permission_list");
    }
    
    columnMenu.menu("show", {
        left: e.pageX,
        top: e.pageY
    });
},
```



#### 第三步

通过给表格增加一个onLoadSuccess事件来实现，在使用时，修改selector的值为对应表格的ID选择器。

```js
onLoadSuccess: function () {
    const selector = "#permission_list";
    const fields = getFields(selector);

    if (fields.length > 0) {
        let datagrid = $(selector);

        for (let i = 0; i < fields.length; i++) {
            let field = fields[i];

            // 隐藏未选中的字段
            if (!field.selected) {
                datagrid.datagrid("hideColumn", field.name);
            }
        }

        datagrid.datagrid("fitColumns");
    }
},
```

更多代码详情，请参考src/main/resources/static/js/permission_list.js