JS實現一個列表中包含上移下移刪除等功能

更新時間：2014年09月24日 15:36:14 投稿：whsnow

一個項目，包括了一個列表頁其中包括在列表中實現上移，下移，刪除等功能，為了用戶體驗，操作均使用JS實現

最近做了一個項目，包括了一個列表頁，為了用戶體驗，操作均使用JS實現，其中包括在列表中實現上移，下移，刪除等功能，前臺JS，后端數據修改使用AJAX，本文主要說一下前臺JS這塊

先看一下頁面的截圖

看一下它的HTML結構，當然，這與前臺切圖有關，后端程序人員只負責寫自己的JS這塊，我以我們項目為例，看一下它們切的HTML

<ul class="clearfix">
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">內容<em class="contIndex">1</em>：</span><em title="2013年 加班.txt" class="titDefaultName">2013年 加班.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">刪除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">內容<em class="contIndex">2</em>：</span><em title="使用說明.txt" class="titDefaultName">使用說明.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">

<a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">刪除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">內容<em class="contIndex">3</em>：</span><em title="占占大師.txt" class="titDefaultName">占占大師.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">
<a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">刪除</span></a>
</div>
</div>
</li>
<li class="courseList">
<div class="titDefault clearfix">
<div class="left clearfix">
<span class="dragBtn"></span><span class="tit">內容<em class="contIndex">4</em>：</span><em title="排序問題.txt" class="titDefaultName">排序問題.txt</em>
</div>
<div class="mid">2014/9/24 9:54:00</div>
<div class="right clearfix">

<a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a>
<a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a>
<a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">刪除</span></a>
</div>
</div>
</li>
</ul>

下面我們主要看一下JS代碼，主要使用JQ的on方法實現的，原因是因為列表的數據有第一次為靜態(tài)的（bind），當排序后，數據變?yōu)閯討B(tài)的（live），所以，這種結構只能使用on才最合理，看一下代碼

<script type="text/ecmascript">
$(function () {
//上移
$(".clearfix").on("click", ".moveUpBtn", function () {
var self = $(this);
var _old = self.closest("li.courseList");
var _new = self.closest("li.courseList").prev("li");
if (_new.length > 0) {
var _temp = _old.html();
_old.empty().append(_new.html());
_new.empty().append(_temp);
}

});

//下移
$(".clearfix").on("click", ".moveDownBtn", function () {
var self = $(this);
var _old = self.closest("li.courseList");
var _new = self.closest("li.courseList").next("li");
if (_new.length > 0) {
var _temp = _old.html();
_old.empty().append(_new.html());
_new.empty().append(_temp);
}
});

//刪除
$(".clearfix").on("click", ".deleteBtn", function () {
var self = $(this);//當前click事件源對象
self.closest("li.courseList").remove();
});

});
</script>

運行之后，效果就出來了，本JS中沒有把與后臺交互的AJAX方法寫出來，大家可以根據具體情況而定。

您可能感興趣的文章: