针对后台列表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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 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中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python多线程并发及测试框架案例
2019/10/15 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python基于内置函数type创建新类型
2020/10/22 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
四风对照检查剖析材料
2014/10/07 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
施工员岗位职责范本
2015/04/11 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技