卡卡網(wǎng)

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

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

測(cè)試該插件在你的瀏覽器是否有效，點(diǎn)擊下面的演示按鈕。

demo

實(shí)例1：最簡(jiǎn)單的TableDnD使用方法

引用TableDnD插件

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

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

所以代碼如下：

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

使用表格(table)

在頁(yè)面上創(chuàng)建一個(gè)標(biāo)準(zhǔn)的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庫(kù)，因此務(wù)必先引用jQuery庫(kù)文件，然后再引用TableDnd插件庫(kù)文件jquery.tablednd.js。

要實(shí)現(xiàn)基本功能，請(qǐng)?jiān)趖able元素上調(diào)用tableDnd()函數(shù)，像這樣：

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

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

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

拖放表格(table)行(tr)

execcodegetcode

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

實(shí)例1主要是介紹該插件的使用方法，是最簡(jiǎn)單的使用。但是，從用戶的使用角度來(lái)看，體驗(yàn)不算太好，因?yàn)橥戏艜r(shí)表行沒(méi)有顏色的區(qū)分，看得眼睛比較累。因此，本實(shí)例著重介紹如何使用顏色樣式美化表行拖放效果。我們先來(lái)看一看效果圖：

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

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

HTML標(biāo)記

首先，在頁(yè)面上創(chuàng)建一個(gè)標(biāo)準(zhǔn)的HTML表格。對(duì)于此演示，我們的表有3列：name，age和country，以及一些隨機(jī)數(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類用于設(shè)置表及其行的樣式。myDragClass CSS類是需要拖放的行設(shè)置樣式。此樣式將在拖動(dòng)期間應(yīng)用，然后在刪除行時(shí)刪除。

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插件將用于實(shí)現(xiàn)此功能。此插件允許用戶重新排序表中的行。關(guān)于這個(gè)插件的好處是它沒(méi)有考慮行內(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插件有一個(gè)比較好的功能，那就是可以禁止某些行不能被拖放。如實(shí)例2的效果圖所示，紅色行是不能被拖動(dòng)的。

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

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

實(shí)例3：漂亮的table行拖放樣式

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

漂亮的table行拖放樣式

execcodegetcode

標(biāo)簽: TableDnD  JQuery