DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> 針對後台列表table拖拽比較實用的jquery拖動排序
針對後台列表table拖拽比較實用的jquery拖動排序
編輯:JQuery入門技巧     

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

話不多說 ,我在網上找了一些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();
 });


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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved