php接口實(shí)現(xiàn)拖拽排序功能
列表拖拽排序是一個(gè)很常見(jiàn)的功能,但是后端接口如何處理卻是一個(gè)令人糾結(jié)的問(wèn)題
如何實(shí)現(xiàn)才能達(dá)到效率最高呢?
先分析一個(gè)場(chǎng)景,假如有一個(gè)頁(yè)面有十條數(shù)據(jù),所謂的拖拽就是在這十條數(shù)據(jù)來(lái)來(lái)回回的拖,但是每次拖動(dòng)都會(huì)影響到其他數(shù)據(jù)例如把最后一條拖到最前面,那么后面九條就自動(dòng)往后移,反之也是,嗯~~~
先想象一下,排序號(hào)是固定的,就好像有十把椅子,每個(gè)椅子都是固定在那里的,移動(dòng)的是上面的人,這樣就不會(huì)影響到其他頁(yè)面的數(shù)據(jù)了而且每個(gè)人換的也是之前其他人的桌椅號(hào)碼,這樣也不用去想到底要加多少才能排在哪里。
接口設(shè)計(jì):
//$ids 這十條數(shù)據(jù)的id集合,逗號(hào)隔開(kāi)的字符串 //$oldIndex 原始位置,從0開(kāi)始算 //$newIndex 要拖動(dòng)的位置 function dragSort($ids,$oldIndex,$newIndex) { //保證查找出來(lái)的數(shù)據(jù)跟前臺(tái)提交的順序一致,這里要order by field //id 主鍵 sort 排序值 $sql = "select id,sort from 表名字 where id in ($ids) order by field(id, " . $ids . ") "; $list = "這里省略,就是去數(shù)據(jù)庫(kù)找嘛"; //id集合 $idArr = []; //排序集合 $sortArr = []; foreach ($list as $item) { $idArr[] = $item['id']; $sortArr[] = $item['sort']; } //記錄要拖動(dòng)的id $oldValue = $idArr[$oldIndex]; //刪除這個(gè)要拖動(dòng)的id unset($idArr[$oldIndex]); //插入新的位置,并自動(dòng)移位 array_splice($idArr, $newIndex, 0, $oldValue); //重新設(shè)置排序 $set = []; for ($i = 0; $i < count($idArr); $i++) { $set[$i]['id'] = $idArr[$i]; $set[$i]['sort'] = $sortArr[$i]; } //保存到數(shù)據(jù)庫(kù)省略 }
總結(jié)
以上所述是小編給大家介紹的php接口實(shí)現(xiàn)拖拽排序功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Ecshop 后臺(tái)添加新功能欄目及管理權(quán)限設(shè)置教程
這篇文章主要介紹了Ecshop 后臺(tái)添加新功能欄目及管理權(quán)限設(shè)置教程,需要的朋友可以參考下2017-11-11laravel框架分組控制器和分組路由實(shí)現(xiàn)方法示例
這篇文章主要介紹了laravel框架分組控制器和分組路由實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了laravel框架分組控制器和分組路由的基本定義與使用方法,需要的朋友可以參考下2020-01-01Zend Framework教程之Application用法實(shí)例詳解
這篇文章主要介紹了Zend Framework教程之Application用法,詳細(xì)分析了Zend_Application的功能,定義,參數(shù)含義及相關(guān)使用技巧,需要的朋友可以參考下2016-03-03php使用get和post傳遞數(shù)據(jù)出現(xiàn)414?Request-URI?Too?Large的原因分析及解決方案
Request-URI Too Large(請(qǐng)求URI過(guò)長(zhǎng))是一個(gè)HTTP錯(cuò)誤狀態(tài)碼,表示所發(fā)送的HTTP請(qǐng)求中的URI(統(tǒng)一資源標(biāo)識(shí)符)長(zhǎng)度超過(guò)了服務(wù)器能夠處理的限制,這篇文章主要介紹了php使用get和post傳遞數(shù)據(jù)出現(xiàn)414?Request-URI Too?Large的解決方案,需要的朋友可以參考下2023-08-08laravel實(shí)現(xiàn)圖片上傳預(yù)覽,及編輯時(shí)可更換圖片,并實(shí)時(shí)變化的例子
今天小編就為大家分享一篇laravel實(shí)現(xiàn)圖片上傳預(yù)覽,及編輯時(shí)可更換圖片,并實(shí)時(shí)變化的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11yii2.0實(shí)現(xiàn)pathinfo的形式訪問(wèn)的配置方法
這篇文章主要介紹了yii2.0實(shí)現(xiàn)pathinfo的形式訪問(wèn)的配置方法的相關(guān)資料,需要的朋友可以參考下2016-04-04PHP編譯安裝時(shí)常見(jiàn)錯(cuò)誤解決辦法
這篇文章主要介紹了PHP編譯安裝時(shí)常見(jiàn)錯(cuò)誤解決辦法,本文涵蓋了PHP編譯安裝中的大多數(shù)錯(cuò)誤,同時(shí)給出解決方法,需要的朋友可以參考下2015-05-05