vue+js+Java在分页的el-table里实现上移、下移；置顶

这里写目录标题

- 一、上移、下移
- 二、置顶

一、上移、下移

在这里插入图片描述
实现：上移到第一行后不能再上移，下移到最后一行不能下移，以及分页后能上移到前一页，下移能移到后一页；（新增sort排序字段）

<el-table :data="tableData3" style="width: 100%">
  <el-table-column prop="name" label="名称"/>
  <el-table-column label="图片">
    <template #default="scope">
      <viewer>
        <img title="点击查看大图" :src="scope.row.url" style="height:80px;width:120px;cursor: pointer">
      </viewer>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="350">
    <template #default="scope">
      <el-button size="small" class="manage-button" :icon="Upload"
                 @click="up(scope)">上移
      </el-button>
      <el-button size="small" class="manage-button" :icon="Download"
                 @click="down(scope)">下移
      </el-button>
      <el-button size="small" class="manage-button" :icon="Edit"
                 @click="openEdit(scope.row)">编辑
      </el-button>
      <el-button size="small" class="manage-delete-button" :icon="Delete"
                 @click="delete(scope.row.id)">删除
      </el-button>
    </template>
  </el-table-column>
</el-table>

	filter() {
      let data = {
        type: 3,
        fileType: 'c',
        pageNum: this.filterInfo.pageNum,
        pageSize: this.filterInfo.pageSize,
        name: this.filterInfo.name,
      };
      let url = "/Ar/getAll";
      this.$request.post(url, data).then(res => {
        this.filterInfo.total = res.obj.total;
        this.filterInfo.pageNum = res.obj.current;
        this.filterInfo.pageSize = res.obj.size;
        this.filterInfo.pages = res.obj.pages;
        for (let item of res.obj.records) {
          //名为空时显示空
          if (item.name === null || item.name === '') {
            item.name = '空'
          }
          //图片为空时设置一个默认图片
          if (item.url !== null || item.url !== '') {
            item.url = window.location.origin + '/api/' + item.url
          } else {
            item.url = '空'
          }
        }
        this.tableData3 = res.obj.records;
      })
    },

	//上移
    up(item) {
      if (this.filterInfo.pageNum === 1 ||
          this.filterInfo.pageNum > 1 && item.$index > 0) {
        if (item.$index > 0) {
        //调用上移下移接口
          let data = {
            id: item.row.id,
            targetId: this.tableData3[item.$index - 1].id,
          }
          let url = "/Ar/upAr";
          this.$request.postForm(url, data).then(res => {
            if (res === 'success') {
              this.$msg.success('上移成功')
            } else {
              this.$msg.warning('上移失败')
            }
            //分页查询，拿到当前页数据
            this.filter();
          });
        } else {
          ElMessage({
            message: '已经是第一行了',
            type: 'warning'
          })
        }
      } else if (this.filterInfo.pageNum > 1 && item.$index === 0) {
        //如果当前页大于1，从临时表格tableDataTemp里拿targetId
        //如果处在非第一页的第一行，需要跨页上移
        this.tableDataTemp = [];
        //调用分页查询接口，但参数pageNum+1，拿到当前页的上一页数据
        let data = {
          type: 3,
          fileType: 'c',
          pageNum: this.filterInfo.pageNum - 1,
          pageSize: this.filterInfo.pageSize,
        };
        let url = "/Ar/getAll";
        this.$request.post(url, data).then(data => {
          this.tableDataTemp = data.obj.records;
          //调用上移下移接口
          let data1 = {
            id: item.row.id,
            targetId: this.tableDataTemp[this.filterInfo.pageSize-1].id,
          }
          let url1 = "/Ar/upAr";
          this.$request.postForm(url1, data1).then(res => {
            if (res === 'success') {
              this.$msg.success('上移成功')
            } else {
              this.$msg.warning('上移失败')
            }
            //分页查询，拿到当前页数据
            this.filter();
          })
        })
      }
    },


	//下移
    down(item) {
      if (this.filterInfo.pageNum === this.filterInfo.pages ||
          this.filterInfo.pageNum===1 && item.$index < this.tableData3.length-1){
        //如果只有一页或者处在最后一页，或者处在第一页非最后一行：当前表格长度决定最后一行
        if(item.$index < this.tableData3.length-1){
        //调用上移下移接口
          let data={
            id: item.row.id,
            targetId:this.tableData3[item.$index+1].id,
          }
          let url = "/Ar/upAr";
          this.$request.postForm(url,data).then(res => {
            if(res === 'success'){
              this.$msg.success('下移成功')
            }else {
              this.$msg.warning('下移失败')
            }
            //分页查询，拿到当前页数据
            this.filter();
          });
        }else {
          ElMessage({
            message: '已经是最后一行了',
            type: 'warning'
          })
        }
      }else {
        //从临时表格tableDataTemp里拿targetId
        //临时表格的pageNum是表格的pageNum+1，从而拿到表格下一页的第一行数据；需要跨页下移
        this.tableDataTemp = [];
        //调用分页查询接口，但参数pageNum+1，拿到当前页的下一页数据
        let data = {
          type: 3,
          fileType: 'c',
          pageNum:this.filterInfo.pageNum+1,
          pageSize:this.filterInfo.pageSize,
        };
        let url = "/Ar/getAll";
        this.$request.post(url,data).then(data=>{
          this.tableDataTemp = data.obj.records;
          //调用上移下移接口
          let data1={
            id: item.row.id,
            targetId: this.tableDataTemp[0].id,
          }
          let url1 = "/Ar/upAr";
          this.$request.postForm(url1,data1).then(res => {
            if(res === 'success'){
              this.$msg.success('下移成功')
            }else {
              this.$msg.warning('下移失败')
            }
            //分页查询，拿到当前页数据
            this.filter();
          })
        })
      }
    }

实体类：

	public class Ar {
        //id自增长
        @TableId(value = "id",type = IdType.AUTO)
        private Integer id;
        private String name;//官网名称
        private String url;
        private Integer sort;//排序（默认与id值一样）
        private Integer type;
        private String fileType;
        private String state;
        private Date createdDate;
        private Date stateDate;

        //不是数据库字段，标记不存在
        @TableField(exist = false)
        private Integer pageSize;
        @TableField(exist = false)
        private Integer pageNum;
}

Controller：

	/**
     * @Description:上移/下移
     **/
    @PostMapping("/upAr")
    public String upArDownLoad(@RequestParam(value = "id") Integer id,
                               @RequestParam(value = "targetId") Integer targetId) throws Exception{
        try{
            return arService.upAr(id,targetId);
        }catch (Exception e){
            e.printStackTrace();
            return "fail";
        }
    }

Service：

String upAr(Integer id,Integer targetId);

Impl:

	/**
     * @Description:上移/下移
     **/
    @Override
    public String upAr(Integer id,Integer targetId) {
        // 获取当前记录和前一个记录
        Ar currentRecord = arMapper.selectById(id);
        Ar previousRecord = arMapper.selectById(targetId);
        // 检查记录是否存在
        if (currentRecord == null || previousRecord == null) {
            // 如果任一记录不存在，返回错误信息或处理异常
            return "Record not found";
        }
        // 交换sort排序字段
        Integer sort = currentRecord.getSort();
        currentRecord.setSort(previousRecord.getSort());
        previousRecord.setSort(sort);

        // 更新数据库中的记录
        arMapper.updateById(currentRecord);
        arMapper.updateById(previousRecord);

        // 返回成功信息
        return "success";
    }

二、置顶

实现：新增top排序字段，数据先按照top值降序排序，然后按照id降序排序；
查询核心代码：

	<select id="getAll" resultType="org.jit.sose.entity.ag.Ar">
        select id, title, is_top as isTop ,created_date as createdDate, user_id as userId, type
        from ar
        where state != 'X' and type = 1
        <if test="date != null and date != ''">
            and date(created_date) = #{date}
        </if>
        <if test="isTop != null and isTop != ''">
            and is_top = #{isTop}
        </if>
        ORDER BY is_top DESC,id desc
    </select>

	<insert id="insertA" parameterType="org.jit.sose.entity.ag.Ar" useGeneratedKeys="true" keyProperty="id">
        insert into ar (title,is_top,user_Id,type) values (#{title},#{isTop},#{userId},#{type})
    </insert>

置顶核心代码：
前端传参数isTop值，默认为0，即不是置顶，为1即置顶；
根据isTop为0或1判断是否置顶；

	@Override
    public String update(Ar ar) {
        //isTop为1即置顶
        if (ar.getIsTop().equals(1)) {
            // 拿到当前isTop的最大值
            Integer isTopMax = arMapper.getMaxIsTop();
            // 如果当前isTop的最大值是0,说明还没有文稿置顶
            if (isTopMax.equals(0) || isTopMax==null) {
                // 当前isTop值为 1
                ar.setIsTop(1);
            } else {
                // 否则当前isTop值就是最大值加1
                ar.setIsTop(isTopMax + 1);
            }
        }
        //id是为空即新增；id不为空即为修改
        if(ar.getId() == null){
            arMapper.insertA(ar);
            return "success";
        }else{
            arMapper.updateById(ar);
            return "success";
        }

    }