设计简单的后台管理的数据排序
来源:互联网 发布:python 列表生成字典 编辑:程序博客网 时间:2024/05/16 19:44
场景:
前端需要展示一个列表(如:首页的轮播图),后台需要能够控制列表数据的排序。
需求:
自动规则 + 运营干预,干预包括:降低排名,提升排名,设定位置和新增item
实现:
在Web后台管理系统中,列表形式的数据排序功能是很常见的需求。要实现这类功能,给数据表增加一个排序字段order
,越大排名越靠前,数字相同时按照自动规则(如:id)排序,这样,就可以实现了:
实际的排序显示为:
jacktombob
既然是后台,那么主要的用户是公司的运营人员,本着提高使用效率的原则,在草稿纸上画了个原型让运营对比,然后来得出哪个更符合他的使用习惯,再做确定,结果沟通下来运营理想中操作是想要在后台直接拖动排序。
现在问题来了,应该怎么设计这个运营干预的功能:
- 方案1:填写数字
- 方案2:上移、下移
- 方案3:手动控制加分or减分(+1/-1 +10/-10)
- 方案4:如运运营所想,提供拖动排序功能
方案1的技术实现最简单,对开发来说最方便,但对运营来说却比较麻烦。
方案2的技术实现其实较复杂,比如上移一位,需要先查询当前项的前一项的order
, 然后让当前项的order+1
并保存, 对运营来说操作较简单。
方案3的技术实现比较简单,比如点击-10,只需更新当前项的order-10
并保存,但有可能在order-10
后当前项的顺序还没有变(如:前一项:12,当前项11,后一项:0),对运营来说操作比较简单。
方案4的技术实现比较复杂,需要使用js实现拖拽数据项的效果等,在拖动结束或点击保存后判断当前的所有数据顺序并保存,对运营来说操作简单。
综合比较
技术实现复杂度:方案1<方案3<方案2<方案4
操作便捷性:方案4<方案3<方案2<方案1
分析一下大多数的场景,看到列表的数据是有限的,一般都是5条、10条、20条左右,由于我所在的是创业公司,开发资源有限,选择方案3在当前情况下是合适的实现方式。
经过了一番沟通,在许诺了下午茶后,说服了产品、运营接收这中方案。
图中就是我用方案3实现的一个界面,单个箭头的是+1 -1
,俩个箭头的分别是+10 -10
,分别用于微调和较大位置距离的调整,在管理大多数少量数据列表的场景下对于运营人员是够用了。
- 设计简单的后台管理的数据排序
- 仿wordpress管理后台设计的后台管理框架
- 使用bootstrap设计的后台管理界面
- 后台权限管理的菜单设计
- 一个简单的后台管理(Html)
- 一个代码简单的后台管理界面
- 一个简单的表格管理后台
- java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据
- 根据后台返回的日期排序数据
- 一个后台运行程序的简单设计
- 一个简单的微博后台设计
- 大批量数据下的后台设计实用性
- 基于ThinkPHP框架的简单的后台管理系统
- 对用户数据进行简单的管理用,C++实现几个字符串的字典序排序
- 关于多层数据排序的数据设计
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- 论后台管理项目中权限的设计思想
- 【JQuery Easy UI】后台管理系统的简单布局分享
- 【管我原创,被评论才是好东西】SOA架构
- Leetcode Course Schedule II
- poj 1222 EXTENDED LIGHTS OUT (高斯消元)
- mtk平台hw_get_module分析
- SQL SERVER下非聚集索引引发的死锁问题
- 设计简单的后台管理的数据排序
- tableView
- jsp返回上一个页面并刷新
- 比对YYYY-MM-DD HH:MM:SS格式的日期与当前日期的时间间隔
- POJ 2446 Chessboard(匈牙利算法)
- 光照基础
- 网络加载等待层
- 【Hibernate框架】关联映射(一对多,多对一)
- UML类图几种关系的总结