栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

先看一下页面的截图

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

  • 内容1:2013年 加班.txt 2014/9/24 9:54:00 上移 下移 删除
  • 内容2:使用说明.txt 2014/9/24 9:54:00 上移 下移 删除
  • 内容3:占占大师.txt 2014/9/24 9:54:00 上移 下移 删除
  • 内容4:排序问题.txt 2014/9/24 9:54:00 上移 下移 删除

下面我们主要看一下JS代码,主要使用JQ的on方法实现的,原因是因为列表的数据有第一次为静态的(bind),当排序后,数据变为动态的(live),所以,这种结构只能使用on才最合理,看一下代码



运行之后,效果就出来了,本JS中没有把与后台交互的AJAX方法写出来,大家可以根据具体情况而定。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号