JS实现一个列表中包含上移下移删除等功能_Javascript教程-查字典教程网
JS实现一个列表中包含上移下移删除等功能
JS实现一个列表中包含上移下移删除等功能
发布时间:2016-12-30 来源:查字典编辑
摘要:最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用...

最近做了一个项目,包括了一个列表页,为了用户体验,操作均使用JS实现,其中包括在列表中实现上移,下移,删除等功能,前台JS,后端数据修改使用AJAX,本文主要说一下前台JS这块

先看一下页面的截图

看一下它的HTML结构,当然,这与前台切图有关,后端程序人员只负责写自己的JS这块,我以我们项目为例,看一下它们切的HTML

<ul> <li> <div> <div> <span></span><span>内容<em>1</em>:</span><em title="2013年 加班.txt">2013年 加班.txt</em> </div> <div>2014/9/24 9:54:00</div> <div> <a value="253040" href="javascript:;"><span>上移</span></a> <a value="253040" href="javascript:;"><span>下移</span></a> <a value="253040" href="javascript:;"><span>删除</span></a> </div> </div> </li> <li> <div> <div> <span></span><span>内容<em>2</em>:</span><em title="使用说明.txt">使用说明.txt</em> </div> <div>2014/9/24 9:54:00</div> <div> <a value="253041" href="javascript:;"><span>上移</span></a> <a value="253041" href="javascript:;"><span>下移</span></a> <a value="253041" href="javascript:;"><span>删除</span></a> </div> </div> </li> <li> <div> <div> <span></span><span>内容<em>3</em>:</span><em title="占占大师.txt">占占大师.txt</em> </div> <div>2014/9/24 9:54:00</div> <div> <a value="253040" href="javascript:;"><span>上移</span></a> <a value="253040" href="javascript:;"><span>下移</span></a> <a value="253040" href="javascript:;"><span>删除</span></a> </div> </div> </li> <li> <div> <div> <span></span><span>内容<em>4</em>:</span><em title="排序问题.txt">排序问题.txt</em> </div> <div>2014/9/24 9:54:00</div> <div> <a value="253041" href="javascript:;"><span>上移</span></a> <a value="253041" href="javascript:;"><span>下移</span></a> <a value="253041" href="javascript:;"><span>删除</span></a> </div> </div> </li> </ul>

下面我们主要看一下JS代码,主要使用JQ的on方法实现的,原因是因为列表的数据有第一次为静态的(bind),当排序后,数据变为动态的(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方法写出来,大家可以根据具体情况而定。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类