建站
咨詢
售后
建站咨詢
新聞中心
使用jQuery實現(xiàn)列表排序功能
jquery拖拽排序，針對后臺列表table進行拖拽排序（超實用?。?/p>
崇信ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！
現(xiàn)在很多后臺列表為了方便均使用拖拽排序的功能，對列表進行隨意的排序。
話不多說 ，我在網(wǎng)上找了一些demo，經(jīng)過對比，現(xiàn)在把方便實用的一個demo列出來，基于jqueryUI.js
先上html代碼，很簡單：
!DOCTYPE htmlhtml lang="en"head
meta charset="UTF-8"
titlejqueryUI拖動/title/headscript src="js/jquery-1.11.0.min.js"/scriptscript src="js/jquery-ui.min.js"/scriptstyle
tr{cursor: pointer;}/stylebodytable id="sort"
thead
tr
th class="index"序號/th
th年份/th
th標題/th
th作者/th
/tr
/thead
tbody
tr
td class="index"1/td
td2014/td
td這是第1個/td
td阿斯蒂芬阿斯蒂芬/td
/tr
tr
td class="index"2/td
td2015/td
td這是第2個/td
td阿薩德發(fā)射點發(fā)歲的/td
/tr
tr
td class="index"3/td
td2016/td
td這是第3個/td
td阿薩德發(fā)送地方/td
/tr
tr
td class="index"4/td
td2017/td
td這是第4個/td
td的說法大賽分/td
/tr
/tbody/table/body/html
除了要引入jquery.js 和jqueryUI.js外，還需要如下一段代碼：
$(document).ready(function(){ ? ? ? ?var fixHelperModified = function(e, tr) { ? ? ? ? ? ? ? ? ? ?var $originals = tr.children(); ? ? ? ? ? ? ? ? ? ?var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
}); ? ? ? ? ? ? ? ? ? ?return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
});
這是我發(fā)現(xiàn)的比較實用的一個拖動排序，還是比較方便的。
jquery 通過拖動排序
例子沒有。關(guān)于拖動的jquery插件很多~jquery ui就能實現(xiàn)~
如：
div data-id='1'1/div
div data-id='2'2/div
div data-id='3'3/div
排序后為：
div data-id='2'2/div
div data-id='1'1/div
div data-id='3'3/div
思路就是jquery each()函數(shù)獲取id，一次寫入字符串中（所得為‘2,1,3’），執(zhí)行ajax請求，將字符串放入數(shù)組，key為id，value為序號，所得為：
array(
'2' = '1',
'1' = '2',
'3' = '3'
)
更新數(shù)據(jù)庫即可。
隨手打的，不知道對你是否有幫助。
如何用Jquery實現(xiàn)多選后拖拽再排序，列表數(shù)據(jù)
jquery ui sortable沒有這種能力，只能自己多加點代碼就進行排序了。。比如，你定義一個數(shù)組，把多選的東西都放在數(shù)組里，然后進行排序。。不過具體怎么排，就看你的業(yè)務(wù)需求了。
關(guān)于jquery sorttable拖拽排序之后如何保存位置到數(shù)據(jù)庫優(yōu)化算法
我現(xiàn)在保存的方式是有很大問題的，望高手們能給一個算法優(yōu)化我的代碼
頁面上有無限制div行數(shù)的數(shù)據(jù)，比如
name order
a 1
b 2
c 3
d 4
e 5
f 6
1、首先把b拖到a前面，我的做法是當遇到最頂端的數(shù)值時把他們的序號1/2=0.5
2、把b拖到c和d之間，做法是把(3+4)/2=3.5
3、把b拖拽到f后面，當遇到最末端的數(shù)值時把他們的序號6+1=7
這時候把3種情況name為b的序號值保存進數(shù)據(jù)庫，下次刷新排序之后的結(jié)果看起來是沒有問題的
但這玩意用久了，也就是說給管理員拖了很多次b的數(shù)據(jù)之后會不停的上下相加然后相除，雖然序號我定義的是double類型，但已經(jīng)去到-28E位數(shù)，記得到-32E就會超出double的長度。所以我覺得我這樣做是絕對只能是用一時的半成品，功能的要求又想實時拖拽，實時保存進數(shù)據(jù)庫，而不想點擊按鈕來統(tǒng)一保存。
請教朋友們有沒有比較好的算法來處理這種問題，有人提出用鏈表，但我還是理解不得，具體做法
文章題目：jquery拖拽排序,拖拽排序后端
URL分享：http://www.dlmjj.cn/article/dsdsdjh.html
