拓展01-datagrid列排序功能_$("#table").datagrid排序的设置-CSDN博客

本文链接：https://blog.csdn.net/vivid9527/article/details/103534112

本文介绍了如何在datagrid中实现列排序功能，从效果图到前后台代码的详细配置，包括在/employee/index.jsp中添加sortable属性，BaseQuery后台的兼容设置，以及完整代码展示。

摘要由CSDN通过智能技术生成

1、效果图

设置了排序的列出现一个上下三角

在这里插入图片描述

2、/employee/index.jsp支持

如图所示，将需要设置排序的列添加sortable="true"属性。
在这里插入图片描述

3、BaseQuery后台支持

下图可以看到，在我们发出排序请求时，传的参数为sort和order，这和我们在BaseQuery中设置的排序字段不一致，需要进行兼容设置。
在这里插入图片描述

//添加兼容属性代码

4、BaseQuery完整代码

package com.xuxusheng.aisell.query;
/*
 * 公共的查询条件
 *       父类：公共的代码，可扩展性强，统一管理
 * */

import org.apache.commons.lang3.StringUtils;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;

public abstract class BaseQuery {
   
    //当前页
    private int currentPage = 1;
    //每页条数
    private int pageSize = 10;
    //排序方式
    private String orderByType ="ASC" ;
    //排序字段
    private String orderByName;

    //该方法由子类实现
    public abstract Specification createSpecification();

    //拿到排序的数据
    public Sort createSort() {
   
        if (StringUtils.isNotBlank(orderByName)) {
   
            //利用三目判断排序方式
            Sort sort = new Sort("ASC".equals(orderByType.toUpperCase()) ? Sort.Direction.ASC : Sort.Direction.DESC, orderByName);
            return sort;
        }
        return null;
    }

    public String getOrderByType() {
   
        return orderByType;
    }

    public void setOrderByType(String orderByType) {
   
        this.orderByType = orderByType;
    }
    //兼容EasyUI排序方式
    public void setOrder(String order) {
   
        this.orderByType = order;
    }

    public String getOrderByName() {
   
        return orderByName;
    }
    //兼容EasyUI排序名字
    public void setOrderByName(String orderByName) {
   
        this.orderByName = orderByName;
    }
    public void setSort(String sort) {
   
        this.orderByName = sort;
    }

    public int getCurrentPage() {
   
        return currentPage;
    }

    //解决jpa当前页从0开始的兼容问题
    public int getCurrentPage2() {
   
        return currentPage - 1;
    }

    public void setCurrentPage(int currentPage) {
   
        this.currentPage = currentPage;
    }

    //兼容分页page
    public void setPage(int page) {
   
        this.currentPage = page;
    }

    public int getPageSize() {
   
        return pageSize;
    }

    public void setPageSize(int pageSize) {
   
        this.pageSize = pageSize;
    }

    //兼容分页rows
    public void setRows(int rows) {
   
        this.pageSize = rows;
    }

    @Override
    public String toString() {
   
        return "BaseQuery{" +
                "currentPage=" + currentPage +
                ", pageSize=" + pageSize +
                ", orderByType='" + orderByType + '\'' +
                ", orderByName='" + orderByName + '\'' +
                '}';
    }
}

5、/employee/index.jsp完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/views/head.jsp" %>
<html>
<head>
    <title>Title</title>
    <%--引入当前页面对应的js文件--%>
    <script src="/js/model/employee.js"></script>
</head>