ruoyi框架实现表格多字段排序

项目用的ruoyi版本比较老，客户要表格排序的功能，本人java萌新，写这篇纯属自己记录一下，如果有问题欢迎各位指点，看下实现方式。

先看下ruoyi本身是怎么做的

1. ruoyi用的PageHelper插件实现分页，PageHelper本身就可以拼接orderby参数，我们就用它来拼接

首先，ruoyi自动生成的前端页面在发送请求时只传了pageSize和pageNum参数，并没有传orderByColumn

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

后端的startPage方法

    /**
     * 设置请求分页数据
     */
    protected void startPage() {
        PageDomain pageDomain = TableSupport.buildPageRequest();
        Integer pageNum = pageDomain.getPageNum();
        Integer pageSize = pageDomain.getPageSize();
        if (StringUtils.isNotNull(pageNum) && StringUtils.isNotNull(pageSize)) {
            String orderBy = SqlUtil.escapeOrderBySql(pageDomain.getOrderBy());
            PageHelper.startPage(pageNum, pageSize, orderBy);
        }
    }

TableSupport.buildPageRequest()这个方法就是创建了pageDomain对象，并且从前端传值中取出了对应的值，可以自己看一下，不关键，这个对象是有orderBy字段的，我们进到pageDomain.getOrderBy()方法里看一下

    public String getOrderBy() {
        if (StringUtils.isEmpty(orderByColumn)) {
            return "";
        }
        return StringUtils.toUnderScoreCase(orderByColumn) + " " + isAsc;
    }

在pageDomain类中有两个属性，orderByColumn和isAsc，这两个属性都是从前端取的，用它们就可以完成排序了，试一下。

单个字段排序

修改一下前端传的值，先把值写死，尝试一下。

      // 查询参数
      queryParams: {
        orderByColumn:'staffJobNo',
        isAsc:'desc',
        pageNum: 1,
        pageSize: 10,
        userName: null,
        createNo: null,
        staffJobNo: null,
      },

在后台日志里可以看到参数拼接上去了

但是我需要的是多字段排序，尝试了好多种办法都不行。又看了看后端方法，修改之后再试一下

多字段排序

再看一下这个getOrderBy()方法

    public String getOrderBy() {
        if (StringUtils.isEmpty(orderByColumn)) {
            return "";
        }
        return StringUtils.toUnderScoreCase(orderByColumn) + " " + isAsc;
    }

在这个类中可以看到orderByColumn和isAsc都是String类型，它在检查orderByColumn属性没有sql注入风险之后拼接了一个空格和isAsc属性，所以应该是只能传单个字段名了，于是我就想把拼接的空格和isAsc删掉，从前端处理好orderByColumn来实现，试一下

修改后的getOrderBy()方法

  public String getOrderBy() {
        if (StringUtils.isEmpty(orderByColumn)) {
            return "";
        }
        return StringUtils.toUnderScoreCase(orderByColumn);
    }

前端传参改一下

  // 查询参数
      queryParams: {
        orderByColumn:'staffJobNo asc,userName asc',
        pageNum: 1,
        pageSize: 10,
        userName: null,
        createNo: null,
        staffJobNo: null,
      },

看下后端拼接情况，可以看到拼接上了

那我们就让前端处理好orderByColumn属性

elementui表格的排序可以去搜一下别人的文章，这里我直接看一下sort-change事件

    handleSort(column){
      console.log(column);
            if (column.prop) { //该列有绑定prop字段走这个分支
              if (column.order == 'ascending') {//当用户点击的是升序按钮，即ascending时
                this.queryParams.orderByColumn=this.changeOrderByColumn(this.queryParams.orderByColumn,column.prop,'asc');
              } else if (column.order == 'descending') {
                //当用户点击的是升序按钮，即descending时
                this.queryParams.orderByColumn=this.changeOrderByColumn(this.queryParams.orderByColumn,column.prop,'desc');
              }else if(column.order==null){
                this.queryParams.orderByColumn=this.changeOrderByColumn(this.queryParams.orderByColumn,column.prop);
              }
            }
            //发送查询请求
            this.getList();
    },

我又写了一个changeOrderByColumn方法去处理要排序的字段

    /**
     * 修改排序字段
     * @param {*} str 排序字段字符串
     * @param {*} prop 字段名
     * @param {*} sort 排序方式，asc或desc
     */
    changeOrderByColumn(str,prop,sort){
      if(str!=null){
      //先把原来的排序规则删除
      const toRemove = prop;
      const regex = new RegExp(toRemove + '\\s*(?:asc|desc)?,?', 'g');
      str = str.replace(regex, '');
      }
      //新增排序规则
      if(sort!=null && (sort=='asc' || sort=='desc')){
        //检查最后一个位置是否为','
        if(str.endsWith(',')){
          str+=prop+' '+sort+',';
        }else{
          str+=','+prop+' '+sort+',';
        }
      }
      //如果最后一个位置是','  将它删除
      if(str.endsWith(',')){
        str=str.slice(0,-1);
      }
      //如果第一个位置是','将它删除
      if (str.charAt(0) === ',') {
        str = str.slice(1); 
      }
      return str;
    }

还有个问题

多字段排序这样就解决了，但是还有个更大的问题就是这个项目的表格不可能就这一个，但是我又不想一个个去修改，有没有好的办法可以快速对整个项目的表格增加排序，就这一点东西我想了好久才搞明白，应该是我太菜了，这也是我的第一篇文章，写的有问题或者是有更好的办法希望各位大佬可以指点一下