JS实现一个列表中包含上移下移删除等功能


Posted in Javascript onSeptember 24, 2014

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

先看一下页面的截图
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方法实现的,原因是因为列表的数据有第一次为静态的(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 相关文章推荐
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
微信小程序实现图片上传功能
May 28 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 #Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 #Javascript
JavaScript设计模式之单例模式实例
Sep 24 #Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 #Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 #Javascript
JavaScript获取图片真实大小代码实例
Sep 24 #Javascript
再探JavaScript作用域
Sep 24 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
自己开发Dojo的建议框架
2008/09/24 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
社区党员先进事迹
2014/01/22 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
经典导游欢迎词
2015/01/26 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
世界名著读书笔记
2015/06/25 职场文书
给校长的建议书范文
2015/09/14 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
新手初学Java网络编程
2021/07/07 Java/Android