技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

實例:使用jQuery插件TableDnD拖放HTML表(table)行

作者:admin    時間:2019-5-10 13:14:17    瀏覽:

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

在頁面上創建一個標準的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

要實現基本功能,請在table元素上調用tableDnd()函數,像這樣:

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

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

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

拖放表格(table)行(tr)

拖放表格(table)行(tr)

execcodegetcode

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

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

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

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

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

HTML標記

首先,在頁面上創建一個標準的HTML表格。對于此演示,我們的表有3列:nameagecountry,以及一些隨機數據。

<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插件將用于實現此功能。此插件允許用戶重新排序表中的行。關于這個插件的好處是它沒有考慮行內的單元格數或包含表單元素的行。

$(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的效果圖所示,紅色行是不能被拖動的。

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

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

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

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

漂亮的table行拖放樣式

漂亮的table行拖放樣式

execcodegetcode

標簽: TableDnD  JQuery  
  • IT熱文
  • 站長推薦
财神捕鱼128 鹿鼎彩票网 2018 香港开奖記录结果 鱼虾蟹怎么才能稳中 北京pk赛车人工计划 欢乐斗地主捕鱼技巧 最赚钱的搜索软件 天津时时开奖结果查询 麻将机多少钱一台 手机上赚钱靠谱 新疆时时开奖号码结果