针对后台列表table拖拽比较实用的jquery拖动排序


Posted in Javascript onOctober 10, 2016

现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序。

话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js

先上html代码,很简单:

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jqueryUI拖动</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
 tr{cursor: pointer;}
</style>
<body>
<table id="sort">
 <thead>
 <tr>
  <th class="index">序号</th>
  <th>年份</th>
  <th>标题</th>
  <th>作者</th>
 </tr>
 </thead>
 <tbody>
  <tr>
   <td class="index">1</td>
   <td>2014</td>
   <td>这是第1个</td>
   <td>阿斯蒂芬阿斯蒂芬</td>
  </tr>
  <tr>
   <td class="index">2</td>
   <td>2015</td>
   <td>这是第2个</td>
   <td>阿萨德发射点发岁的</td>
  </tr>
  <tr>
   <td class="index">3</td>
   <td>2016</td>
   <td>这是第3个</td>
   <td>阿萨德发送地方</td>
  </tr>
  <tr>
   <td class="index">4</td>
   <td>2017</td>
   <td>这是第4个</td>
   <td>的说法大赛分</td>
  </tr>
 </tbody>
</table>
</body>
</html>

复制代码
除了要引入jquery.js 和jqueryUI.js外,还需要如下一段代码:

复制代码

$(document).ready(function(){
  var fixHelperModified = function(e, tr) {
     var $originals = tr.children();
     var $helper = tr.clone();
     $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
     });
     return $helper;
    },
    updateIndex = function(e, ui) {
     $('td.index', ui.item.parent()).each(function (i) {
      $(this).html(i + 1);
     });
    };
  $("#sort tbody").sortable({
   helper: fixHelperModified,
   stop: updateIndex
  }).disableSelection();
 });

这是我发现的比较实用的一个拖动排序,还是比较方便的。

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 #Javascript
JS命令模式例子之菜单程序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
You might like
php中的常用魔术方法总结
2013/08/02 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
js实现放大镜特效
2017/05/18 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python中IPYTHON入门实例
2015/05/11 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
利用python求积分的实例
2019/07/03 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python如何删除文件、目录
2020/06/23 Python
Python Django路径配置实现过程解析
2020/11/05 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
大四自我鉴定范文
2013/10/06 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
四群教育工作实施方案
2014/03/26 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书