場景:
前端需要展示一個列表(如:首頁的輪播圖),后台需要能夠控制列表數據的排序。
需求:
自動規則 + 運營干預,干預包括:降低排名,提升排名,設定位置和新增item
實現:
在Web后台管理系統中,列表形式的數據排序功能是很常見的需求。要實現這類功能,給數據表增加一個排序字段order
,越大排名越靠前,數字相同時按照自動規則(如:id)排序,這樣,就可以實現了:
id | name | order |
---|---|---|
1 | tom | 2 |
2 | jack | 3 |
3 | bob | 1 |
實際的排序顯示為:
jack
tom
bob
既然是后台,那么主要的用戶是公司的運營人員,本着提高使用效率的原則,在草稿紙上畫了個原型讓運營對比,然后來得出哪個更符合他的使用習慣,再做確定,結果溝通下來運營理想中操作是想要在后台直接拖動排序。
現在問題來了,應該怎么設計這個運營干預的功能:
- 方案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
,分別用於微調和較大位置距離的調整,在管理大多數少量數據列表的場景下對於運營人員是夠用了。