后端查询列表排序方案

319 阅读2分钟

需求

  • 分页列表,前端控制排序,可以自定义把一行,或多行数据排到列表任意指定位置
  • 支持搜索单条数据排到指定位置

方案1:

  • 点击排序按钮,将所有的数据加载出来不分页。

  • 用户选择要排序的列,拖拽排序,拖拽停止后,把拖拽行的id和拖拽后的序号传给后端,如下表示把列id为123456拖拽到第10行。

    {"id":"123456","index":10}

  • 每次只能拖拽一条数据。

  • 排序完成后,列表分页展示排序后的结果。

  • 注意:数据太多不能排序,因为要一次加载全部数据,且不能搜索到特定的一行排序。

  • 修改前页面

image.png

  • 修改后页面

image.png

方案2:

  • 保持现状不变,不能批量,只能单条选择填排序结果,每次只能填当前行想要排序的结果,现状如果多行输入相同的排序结果,同时排后端排序会出错。
  • 如果有置顶排序,正常排序的第一行的序号从置顶排序后往下排,比如置顶了5个,那么正常排序的第一个序号就是6(序号前端实现)。
  • 支持搜索排序,支持分页排序。

方案 3

  • 保持现状不变,前后端做校验,多选的情况不能传不同的记录,相同的排序号。
  • 排序是否正确后端保证。
  • 如果有置顶排序,正常排序的第一行的序号从置顶排序后往下排,比如置顶了5个,那么正常排序的第一个序号就是6(序号前端实现)。
  • 支持搜索排序,支持分页排序。
  • 注意:数据量过多不适合此排序,利用数组的移动数据过多影响效率。

image.png