需求
- 分页列表,前端控制排序,可以自定义把一行,或多行数据排到列表任意指定位置
- 支持搜索单条数据排到指定位置
方案1:
-
点击排序按钮,将所有的数据加载出来不分页。
-
用户选择要排序的列,拖拽排序,拖拽停止后,把拖拽行的id和拖拽后的序号传给后端,如下表示把列id为123456拖拽到第10行。
{
"id"
:"123456"
,"index"
:10
} -
每次只能拖拽一条数据。
-
排序完成后,列表分页展示排序后的结果。
-
注意:数据太多不能排序,因为要一次加载全部数据,且不能搜索到特定的一行排序。
-
修改前页面
- 修改后页面
方案2:
- 保持现状不变,不能批量,只能单条选择填排序结果,每次只能填当前行想要排序的结果,现状如果多行输入相同的排序结果,同时排后端排序会出错。
- 如果有置顶排序,正常排序的第一行的序号从置顶排序后往下排,比如置顶了5个,那么正常排序的第一个序号就是6(序号前端实现)。
- 支持搜索排序,支持分页排序。
方案 3 :
- 保持现状不变,前后端做校验,多选的情况不能传不同的记录,相同的排序号。
- 排序是否正确后端保证。
- 如果有置顶排序,正常排序的第一行的序号从置顶排序后往下排,比如置顶了5个,那么正常排序的第一个序号就是6(序号前端实现)。
- 支持搜索排序,支持分页排序。
- 注意:数据量过多不适合此排序,利用数组的移动数据过多影响效率。