我們在操作列表數(shù)據(jù)的時候，需要將數(shù)據(jù)行排列順序進行調(diào)整，如上移和下移行，將行數(shù)據(jù)置頂?shù)龋@些操作都可以在前端通過點擊按鈕來完成，并且伴隨著簡單的動態(tài)效果，輕松實現(xiàn)表格數(shù)據(jù)排序。
運行效果圖：
HTML
頁面上是一個簡單的數(shù)據(jù)表格，我們在數(shù)據(jù)行中分別放置“上移”，“下移”和“置頂”三個鏈接，并且分別定義三個class屬性，我們來通過jQuery實現(xiàn)這些操作。
<table class="table"> <tr> <td>HTML5獲取地理位置定位信息</td> <td>2015-04-25</td> <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置頂</a></td> </tr> <tr> <td>CSS+Cookie實現(xiàn)的固定頁腳廣告條置頂</a></td> </tr> ... </table>
jQuery
我們需要預(yù)先把jQuery庫文件載入，然后分別綁定上移、下移和置頂三個操作的click事件。以“上移”為例，當點擊時，獲取當前點擊的行內(nèi)容，及tr，然后判斷該行是不是第一行，如果不是第一行，那么就將該行插入到上一行的前面，實現(xiàn)了互換的目的。當然我們可以給行加fadeOut()和fadeIn()過渡效果，這樣看起來會更生動些，否則上移的過程會一閃而過。“下移”和“置頂”操作流程都差不多，請看代碼：
$(function(){ //上移 var $up = $(".up") $up.click(function() { var $tr = $(this).parents("tr"); if ($tr.index() != 0) { $tr.fadeOut().fadeIn(); $tr.prev().before($tr); } }); //下移 var $down = $(".down"); var len = $down.length; $down.click(function() { var $tr = $(this).parents("tr"); if ($tr.index() != len - 1) { $tr.fadeOut().fadeIn(); $tr.next().after($tr); } }); //置頂 var $top = $(".top"); $top.click(function(){ var $tr = $(this).parents("tr"); $tr.fadeOut().fadeIn(); $(".table").prepend($tr); $tr.css("color","#f60"); }); }); 當然，實際應(yīng)用中應(yīng)該結(jié)合您的項目，在操作“上移”，“下移”和“置頂”完成時，應(yīng)該和后臺程序進行Ajax異步交互，保證排序數(shù)據(jù)真正被后臺記錄，然后刷新后會展示新的排序結(jié)果，本文不再對該異步操作做詳細解說。
新聞熱點
疑難解答
