针对后台列表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 相关文章推荐
动态加载iframe
Jun 16 Javascript
JAVASCRIPT HashTable
Jan 22 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
七年级地理教学反思
2014/01/26 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
银行进社区活动总结
2014/07/07 职场文书
红高粱观后感
2015/06/10 职场文书
公司岗位说明书
2015/10/08 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书