table tr 拖拽排序針對后臺列表table拖拽比較實用的jquery拖動排序－IT工程師數位筆記本

文章出處

現在很多后臺列表為了方便均使用拖拽排序的功能，對列表進行隨意的排序。

話不多說，我在網上找了一些demo，經過對比，現在把方便實用的一個demo列出來，基于jqueryUI.js

先上html代碼，很簡單：

復制代碼

<!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>標題</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>阿薩德發射點發歲的</td>  </tr>  <tr>   <td class="index">3</td>   <td>2016</td>   <td>這是第3個</td>   <td>阿薩德發送地方</td>  </tr>  <tr>   <td class="index">4</td>   <td>2017</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(); });

這是我發現的比較實用的一個拖動排序，還是比較方便的。

歡迎轉載：http://www.kanwencang.com/bangong/20161206/63663.html

文章列表