1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Table拖拽</title>
  6.  
  7.     <!--插件：bootstrap-table http://bootstrap-table.wenzhixin.net.cn/  -->
  8.     <!--bootstrap-table扩展bootstrap-table-reorder-rows https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/reorder-rows  -->
  9.     <!--插件：jquery.tablednd.js -->
  10.     <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  11.     <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
  12.     <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">
  13.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  14.     <script type="text/javascript" src="jquery.tablednd.js"></script>
  15.     <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>
  16.     <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
  17.     <script type="text/javascript">
  18.         $(function () {
  19.             $("#tableId").bootstrapTable({
  20.                 reorderableRows: true,
  21.                 onReorderRowsDrag: function (table, row) {
  22.                     console.log()
  23.                 },
  24.                 onReorderRowsDrop: function (table, row) {
  25.                     console.log()
  26.                 },
  27.                 onReorderRow: function (newData) {
  28.                     console.log()
  29.                 }
  30.             });
  31.  
  32.         });
  33.     </script>
  34. </head>
  35. <body>
  36.     <h2>Drag the table--Neven.Jr Production</h2>
  37.     <table class="bordered" id="tableId">
  38.         <thead>
  39.  
  40.             <tr>
  41.                 <th>#</th>
  42.                 <th>IMDB Top  Movies</th>
  43.                 <th>Year</th>
  44.                 <th>Action</th>
  45.             </tr>
  46.         </thead>
  47.         <tr>
  48.             <td></td>
  49.             <td>The Shawshank Redemption</td>
  50.  
  51.             <td></td>
  52.             <td>
  53.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  54.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  55.             </td>
  56.         </tr>
  57.         <tr>
  58.             <td></td>
  59.             <td>The Godfather</td>
  60.             <td></td>
  61.             <td>
  62.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  63.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  64.             </td>
  65.         </tr>
  66.         <tr>
  67.  
  68.             <td></td>
  69.             <td>The Godfather: Part II</td>
  70.             <td></td>
  71.             <td>
  72.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  73.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  74.             </td>
  75.         </tr>
  76.         <tr>
  77.             <td></td>
  78.             <td>The Good, the Bad and the Ugly</td>
  79.             <td></td>
  80.             <td>
  81.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  82.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  83.             </td>
  84.         </tr>
  85.         <tr>
  86.             <td></td>
  87.             <td>Pulp Fiction</td>
  88.             <td></td>
  89.             <td>
  90.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  91.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  92.             </td>
  93.         </tr>
  94.         <tr>
  95.             <td></td>
  96.             <td> Angry Men</td>
  97.  
  98.             <td></td>
  99.             <td>
  100.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  101.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  102.             </td>
  103.         </tr>
  104.         <tr>
  105.             <td></td>
  106.             <td>Schindler's List</td>
  107.             <td></td>
  108.             <td>
  109.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  110.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  111.             </td>
  112.         </tr>
  113.         <tr>
  114.  
  115.             <td></td>
  116.             <td>One Flew Over the Cuckoo's Nest</td>
  117.             <td></td>
  118.             <td>
  119.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  120.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  121.             </td>
  122.         </tr>
  123.         <tr>
  124.             <td></td>
  125.             <td>The Dark Knight</td>
  126.  
  127.             <td></td>
  128.             <td>
  129.                 <a href="javascript:void(0);">Mark</a>
  130.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  131.             </td>
  132.         </tr>
  133.         <tr class="nodrop nodrag">
  134.             <td></td>
  135.             <td>The Lord of the Rings: The Return of the King</td>
  136.             <td></td>
  137.             <td>
  138.                 <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
  139.                 <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
  140.             </td>
  141.         </tr>
  142.  
  143.     </table>
  144.     <br>
  145. </body>
  146. </html>

https://files.cnblogs.com/files/xuguanghui/table%E8%A1%8C%E6%8B%96%E6%8B%BD.rar

或者使用sorttable插件： http://jqueryui.com/sortable/

table行拖拽的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. Jquery easyui treegrid实现树形表格的行拖拽

    前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...

  3. jqGrid之treeGrid及行拖拽

    单纯的做个小记录 今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录 treeGrid 树表格的应用在官网给出了很直白的例子: 1.http://blog.mn886.ne ...

  4. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  5. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  6. Dev GridView行拖拽

    http://blog.csdn.net/keyrainie/article/details/8513802 http://www.cnblogs.com/qq4004229/archive/2012 ...

  7. devpress 的gridview 控件的行拖拽 z

    首先,添加引用:using DevExpress.XtraGrid.Views.Grid.ViewInfo;               gridControl1.AllowDrop = true; ...

  8. ListView 多行拖拽排序

    核心代码:修改ListView的属性,及绑定事件 // 初始化listView1. private void InitializeListView() { listView1.AllowDrop = ...

  9. jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

随机推荐

  1. android入门 — ProgressDialog/DatePickerDialog/TimePickerDialog

    这三个Dialog都是AlertDialog的子类. ①DatePickerDialog 1.创建DatePickerDialog的实例: 2.通过Calendar类获得系统时间: 3.通过DateP ...

  2. windows平台下nginx+PHP环境安装

    因为日常工作在windows下,为方便在window是下进行PHP开发,需要在windows平台下搭建PHP开发环境,web服务器选择nginx,不过windows版本的nginx性能要比Linux/ ...

  3. Maven的setting配置文件

    一.Maven的setting配置文件 和 在Eclipse中对Maven的正确配置. 1.Maven的配置文件(Maven的安装目录/conf/settings.xml ) 和 Maven仓库下(默 ...

  4. Git命令常用清单

    本文从以下十个方面,介绍Git命令的常用清单: 一.新建代码库 二.配置 三.增加/删除文件 四.代码提交 五.分支 六.标签 七.查看信息 八.远程同步 九.撤销 十.其他 每天使用 Git ,但是 ...

  5. sqlserver-触发器-判断更新了哪个字段。

    create trigger 触发器名称on 表名(将触发器创建到那张表中)for updateasif update(判断更新字段)beginupdate (要更新的表名) set 字段=inser ...

  6. Spring mvc 数据验证框架注解

    @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为false@DecimalMax(value) 被注解的元素必须为一个数字,其值必须小于等于指定的最小值 ...

  7. compareTo 返回为整数 调用者比参数大;返回负数 调用者比参数小

    compareTo 返回为整数 调用者比参数大;返回负数 调用者比参数小

  8. BZOJ 1066：[SCOI2007]蜥蜴（最大流)

    蜥蜴Description在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到 ...

  9. 【bzoj4897】[Thu Summer Camp2016]成绩单 区间dp

    题目描述 给你一个数列,每次你可以选择连续的一段,付出 $a+b\times 极差^2$ 的代价将其删去,剩余部分拼到一起成为新的数列继续进行此操作.求将原序列全部删去需要的最小总代价是多少. 输入 ...

  10. InnoDB 5.6 新特性之一：FullTEXT Indexes[1.简单介绍]

    先来看一条SQL语句: SELECT * FROM aa where acol like '%like_normal%'; 当我们使用Innodb时,无论如何对这条语句进行优化,都是无意义的:有的人会 ...