卡卡網(wǎng)

HTML表(table)是顯示數(shù)據(jù)的首選UI選項，排序、分頁和搜索/過濾是具有大量數(shù)據(jù)的任何HTML表的必備功能，這些功能使HTML表格對最終用戶而言更加友好且高效。在某些情況下，可能需要HTML表行的拖放功能，不幸的是，jQuery本身并不具備這個功能。為了實現(xiàn)這一點，我們需要使用一個名為TableDnD的jQuery插件。在這篇文章中，我們將學習如何使用jQuery插件TableDnD實現(xiàn)拖放HTML表(table)行。

注意：該插件在Firefox瀏覽器（58.0.1）測試無效，在Chrome、360、IE9測試均有效。

測試該插件在你的瀏覽器是否有效，點擊下面的演示按鈕。

demo

實例1：最簡單的TableDnD使用方法

引用TableDnD插件

使用TableDnD，需要下載一個js文件：jquery.tablednd.js，此文件包含在本文源碼下載包里。

要使用TableDnD，還要先引用jQuery庫文件，我們可以從百度公共庫里引用該文件。

所以代碼如下：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.tablednd.js"></script>

使用表格(table)

在頁面上創(chuàng)建一個標準的HTML表格，如：

<table id="table-1" border=3 cellspacing="0" cellpadding="1" width="300">
  <tr id="1"><td>1</td><td>One</td><td> text1</td></tr>
  <tr id="2"><td>2</td><td>Two</td><td> text2</td></tr>
  <tr id="3"><td>3</td><td>Three</td><td> text3</td></tr>
  <tr id="4"><td>4</td><td>Four</td><td> text4</td></tr>
  <tr id="5"><td>5</td><td>Five</td><td> text5</td></tr>
  <tr id="6"><td>6</td><td>Six</td><td> text6</td></tr>
</table>

編寫jQuery程序

該插件僅依賴于jQuery庫，因此務必先引用jQuery庫文件，然后再引用TableDnd插件庫文件jquery.tablednd.js。

要實現(xiàn)基本功能，請在table元素上調(diào)用tableDnd()函數(shù)，像這樣：

$(document).ready(function() {
  //初始化表
  $("#table-1").tableDnD();
});

注意這個 #table-1 是表格(table)的id。

這樣，該表格(table)行(tr)就可以拖放了。效果圖如下：

拖放表格(table)行(tr)

execcodegetcode

實例2：使用顏色樣式美化表行拖放效果

實例1主要是介紹該插件的使用方法，是最簡單的使用。但是，從用戶的使用角度來看，體驗不算太好，因為拖放時表行沒有顏色的區(qū)分，看得眼睛比較累。因此，本實例著重介紹如何使用顏色樣式美化表行拖放效果。我們先來看一看效果圖：

使用顏色樣式美化表行拖放效果

這樣看就好很多了吧。下面介紹使用方法。

HTML標記

首先，在頁面上創(chuàng)建一個標準的HTML表格。對于此演示，我們的表有3列：name，age和country，以及一些隨機數(shù)據(jù)。

<table id="tblData">
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
   </tr>
   <tr>
      <td>Maria Anders</td>
      <td>30</td>
      <td>Germany</td>
   </tr>
   <tr>
      <td>Francisco Chang</td>
      <td>24</td>
      <td>Mexico</td>
   </tr>
   <tr>
      <td>Roland Mendel</td>
      <td>60</td>
      <td>Austria</td>
   </tr>
   <tr>
      <td>Helen Bennett</td>
      <td>28</td>
      <td>UK</td>
   </tr>
   <tr>
      <td>Yoshi Tannamuri</td>
      <td>35</td>
      <td>Canada</td>
   </tr>
   <tr>
      <td>Giovanni Rovelli</td>
      <td>46</td>
      <td>Italy</td>
   </tr>
   <tr class="nodrag">
      <td>Narendra Sharma</td>
      <td>56</td>
      <td>India</td>
   </tr>
   <tr>
      <td>Alex Smith</td>
      <td>59</td>
      <td>USA</td>
   </tr>
</table>

CSS

以下CSS類用于設置表及其行的樣式。myDragClass CSS類是需要拖放的行設置樣式。此樣式將在拖動期間應用，然后在刪除行時刪除。

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
th {
    background-color: #dddddd;
}
.even {
    background-color: #ecf6fc;
}
.odd {
    background-color: #ddeedd;
}
.myDragClass {
    background-color: yellow;
    font-size: 16pt;
}
.nodrag {
    background-color: red;
}
.nodrop {
    background-color: lightblue;
}

jQuery代碼

正如前面所提到的，TableDnd插件將用于實現(xiàn)此功能。此插件允許用戶重新排序表中的行。關于這個插件的好處是它沒有考慮行內(nèi)的單元格數(shù)或包含表單元素的行。

$(document).ready(function() {

  $("#tblData").find("tr:even").addClass("even");
  $("#tblData").find("tr:odd").addClass("odd");
  $("#tblData").tableDnD({
    onDragClass: "myDragClass",
    onDrop: function(table, row) {
      $("#tblData").find("tr").removeClass("even odd");
      $("#tblData").find("tr:even").addClass("even");
      $("#tblData").find("tr:odd").addClass("odd");
    }
  });

});

代碼中 #tblData 是表格的id。

execcodegetcode

禁止某些行不能被拖放

TableDnd插件有一個比較好的功能，那就是可以禁止某些行不能被拖放。如實例2的效果圖所示，紅色行是不能被拖動的。

要實現(xiàn)此功能，其實很簡單，我們只需在table的tr代碼里加上一個叫noDrag的類即可，如前面實例2的table代碼這幾行：

<tr class="nodrag">
  <td>Narendra Sharma</td>
  <td>56</td>
  <td>India</td>
</tr>

實例3：漂亮的table行拖放樣式

下面介紹一個漂亮的table行拖放樣式，效果圖如下：

漂亮的table行拖放樣式

execcodegetcode

標簽: TableDnD  JQuery