大腿的博客

前端表格的数据排序,后台留记录实现

字数统计: 746阅读时长: 2 min
2019/01/11 Share

前端需要自定义排序数据库的数据,在此记录想到的实现方式。

前言

排序的页面主要效果有两种,一种是点击按钮,实现上移下移、置顶置底的功能。这类的操作相对简单。二种是直接拖拽表格的数据实现拖拽的排序,个人认为实现上相对难点。考虑的重点在于数据库的效率,按钮式的操作在有排序字段的前提下,可以实现上移下移和置顶置底都只有两条数据的操作,但是按钮的缺乏了自由挑位置插入的功能。手动拖拽的功能可以按自己想法随意排数据,依旧在使用排序字段的方式下,假如现在10条数据可以排,将第九条查到第二条,将会进行8次的数据库操作,并且排序字段越多,数据库操作次数越多。出于效率的考虑,最终选择了建立排序表的方式,替代了排序字段以记录排序的规则。次方法将只操作一次数据库,但相对添加了前后台代码上的效率。

数据库设置排序字段

按钮操作

使用排序字段的方式下,按钮的上移下移置顶置底操作可实现的操作如下

上移下移:这个其实是交换的操作,将需要交换的数据传到后台,后台进行入库。操作数据为两条
置顶置底:因为其数据的特殊,可以进行算法来优化。
某数据置顶,则将这个数据与顶数据的排序字段进行减法 sort(顶)-sort(排序)
某数据置底,则将这个数据的模与底数据的排序字段进行加法 |sort(底)|+sort(排序)
其操作的数据库也都是两次。

自由拖拽

自由拖拽的情况下,没想到优化的方法。只能暴力地进行大量的数据操作。

数据库设置排序表

在排序表的方式下,我将页面上的排序进行了存储,设置标识字段和排序规则字段,页面将根据标识和规则进行排序。现在的实现为:页面进行本地的排序,然后将排好的顺序根据我们的约定生成相应排序规则,将规则存入数据库。这方法将不对原生的数据库数据进行操作,顺序完全交与排序表,并且每次都只进行一次的数据库交互。对应多出来的操作在每次前端都需要进行数据的遍历,生成排序规则。

考虑下来,个人认为减轻数据库的负担比较好,所以选用了设置的排序表的方式,并且此方式可作为公共服务供全局使用。

CATALOG
  1. 1. 前言
  2. 2. 数据库设置排序字段
    1. 2.1. 按钮操作
    2. 2.2. 自由拖拽
  3. 3. 数据库设置排序表