FEBS-Shiro添加layui数据表格后端排序

FEBS-Shiro添加layui数据表格后端排序

https://github.com/wuyouzhuguli/FEBS-Shiro
技术选型
后端
Spring Boot 2.2.1
Mybatis-Plus
MySQL 5.7.x,Hikari,Redis
Shiro 1.4.2
前端
Layui 2.5.5
Nepadmin
formSelects 4.x 多选框
eleTree 树组件
formSelect.js树形下拉
Apexcharts图表

目前febs-shiro中的layui数据表格都没有开启字段排序功能，项目中用到了排序功能，所以记录下。

完事了。
no，这样只是前端排序，本页排序。
要想全局排序，需要后端支持（sql中加order by啊）。

添加排序监听

        //监听排序事件
        table.on('sort(projectTable)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('projectTable', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
            // layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });

这样会触发重新请求后端Controller，
https://www.layui.com/doc/modules/table.html#onsort

这是默认的分页请求，
后台生成的SQL

WITH selectTemp AS (
	SELECT TOP
		100 PERCENT ROW_NUMBER ( ) OVER ( ORDER BY CURRENT_TIMESTAMP ) AS __row_number__,
		p.*,
		u.name headName,
		( SELECT name FROM dict_project_stage s WHERE p.stage = s.id ) stageName,
		( SELECT name FROM dict_project_type t WHERE p.type = t.id ) typeName,
		( SELECT name FROM t_user u WHERE p.create_user = u.USER_ID ) createUsername 
	FROM
		project p
		LEFT JOIN t_user u ON p.head_id = u.USER_ID 
	) SELECT
	* 
FROM
	selectTemp 
WHERE
	__row_number__ BETWEEN 1 
	AND 10 
ORDER BY
	__row_number__;

当点击了排序字段之后会进行重新请求

多了这两个参数,后台生成的SQL：

WITH selectTemp AS (
	SELECT TOP
		100 PERCENT ROW_NUMBER ( ) OVER ( ORDER BY project_name ) AS __row_number__,
		p.*,
		u.name headName,
		( SELECT name FROM dict_project_stage s WHERE p.stage = s.id ) stageName,
		( SELECT name FROM dict_project_type t WHERE p.type = t.id ) typeName,
		( SELECT name FROM t_user u WHERE p.create_user = u.USER_ID ) createUsername 
	FROM
		project p
		LEFT JOIN t_user u ON p.head_id = u.USER_ID 
	ORDER BY
		project_name 
	) SELECT
	* 
FROM
	selectTemp 
WHERE
	__row_number__ BETWEEN 1 
	AND 10 
ORDER BY
	__row_number__;

对比一下

后端代码：

    @Override
    public IPage findProjectDetailPage(QueryRequest request, @Param("project") Project project) {
        //分页
        Page page = new Page<>(request.getPageNum(), request.getPageSize());
        String field = request.getField();
        String order = request.getOrder();
        // 排序
        if (field != null) {
            // 驼峰命名法转下划线分割
            field = CaseFormat.LOWER_CAMEL.to(CaseFormat.LOWER_UNDERSCORE, field);
        }
        List orders = new ArrayList<>();
        if ("asc".equalsIgnoreCase(order)) {
            orders.add(OrderItem.asc(field));
        } else if ("desc".equalsIgnoreCase(order)) {
            orders.add(OrderItem.desc(field));
        }
        page.setOrders(orders);
        return baseMapper.findProjectDetailPage(page, project);
    }

这种其中发现了个比较怪异的问题。
layui的表头里边写的是对象的属性名（驼峰命名，如projectName），排序字段传到后台也是对象的属性名的字符串类型（驼峰命名，如projectName），mybatis plus的OrderItem.asc或者OrderItem.desc接收的是数据表原始字段名（设计的是下划线分割的，如project_name）,其中会需要多了一层转换。

// 驼峰命名法转下划线分割
field = CaseFormat.LOWER_CAMEL.to(CaseFormat.LOWER_UNDERSCORE, field);

把实体类的属性名改成project_name就能解决这个问题