針對后臺列表table拖拽比較實用的jquery拖動排序
更新時間：2016年10月10日 14:16:50 作者：xiuber
這篇文章主要為大家詳細(xì)介紹了比較實用的jquery拖動排序,具有一定的參考價值，感興趣的小伙伴們可以參考一下
現(xiàn)在很多后臺列表為了方便均使用拖拽排序的功能，對列表進(jìn)行隨意的排序。
話不多說 ，我在網(wǎng)上找了一些demo，經(jīng)過對比，現(xiàn)在把方便實用的一個demo列出來，基于jqueryUI.js
先上html代碼，很簡單：
復(fù)制代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryUI拖動</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
tr{cursor: pointer;}
</style>
<body>
<table id="sort">
<thead>
<tr>
<th class="index">序號</th>
<th>年份</th>
<th>標(biāo)題</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<td class="index">1</td>
<td>2014</td>
<td>這是第1個</td>
<td>阿斯蒂芬阿斯蒂芬</td>
</tr>
<tr>
<td class="index">2</td>
<td>2015</td>
<td>這是第2個</td>
<td>阿薩德發(fā)射點發(fā)歲的</td>
</tr>
<tr>
<td class="index">3</td>
<td>2016</td>
<td>這是第3個</td>
<td>阿薩德發(fā)送地方</td>
</tr>
<tr>
<td class="index">4</td>
<td>2017</td>
<td>這是第4個</td>
<td>的說法大賽分</td>
</tr>
</tbody>
</table>
</body>
</html>
復(fù)制代碼
除了要引入jquery.js 和jqueryUI.js外，還需要如下一段代碼：
復(fù)制代碼
$(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)的比較實用的一個拖動排序，還是比較方便的。
相關(guān)文章
頁面滾動到指定DIV的方法有很多，在本文將為大家介紹下jquery是如何實現(xiàn)的2013-09-09
Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡潔，不容易出錯。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等，在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量。2015-05-05
Bootstrap是最流行的前端開發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
使用jQuery實現(xiàn)一個類似GridView的編輯,更新,取消和刪除的功能
在項目中遇到這樣的需求當(dāng)用戶點擊編輯時，在點擊行下動態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點擊“取消”銨鈕，刪除剛剛動態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實例代碼，一起看看吧2017-03-03
關(guān)于jQuery中的toggle()函數(shù)，相信大家都非常的了解，網(wǎng)上也有許多的相關(guān)教程，今天要給大家分享的是在實際的項目中toggle()的使用方法，需要的小伙伴可以參考下。2015-04-04
Asp.net下利用Jquery Ajax實現(xiàn)用戶注冊檢測（驗證用戶名是否存）
最近在朋友做個網(wǎng)站http://www.smarteas.net/，其中用實現(xiàn)用戶注冊這功能，最近網(wǎng)站做到了尾聲，我也就把其它有些技術(shù)和大家分享一下。2010-09-09
這篇文章主要介紹了jQuery實現(xiàn)仿騰訊視頻列表分頁效果的方法,涉及jquery頁面元素的運算與動態(tài)調(diào)用技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
jquery select動態(tài)加載選擇(兼容各種瀏覽器)
jquery select動態(tài)加載選擇,兼容各種瀏覽器包括ie6,在ie6下會報錯,不過我們已有解決方法，感興趣的朋友可以了解下，或許對你學(xué)習(xí)jquery有所幫助2013-02-02
最常使用javascript的場合就是表單的驗證，而jQuery作為一個優(yōu)秀的javascript庫，也提供了一個優(yōu)秀的表單驗證插件——Validation。本文將詳細(xì)介紹validation插件。下面跟著小編一起來看下吧2017-03-03
jQueryMobile之Helloworld與頁面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁面切換的方法,實例分析了jQueryMobile的基礎(chǔ)用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02