针对后台列表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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
javascript工具库代码
Mar 29 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
多人战的战术与战略
2020/03/04 星际争霸
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
python的id()函数解密过程
2012/12/25 Python
tornado捕获和处理404错误的方法
2014/02/26 Python
python学习 流程控制语句详解
2016/06/01 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
简单了解python PEP的一些知识
2019/07/13 Python
python同步两个文件夹下的内容
2019/08/29 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
兵马俑导游词
2015/02/02 职场文书
python实现监听键盘
2021/04/26 Python
python析构函数用法及注意事项
2021/06/22 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电