table行拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table拖拽</title> <!--插件：bootstrap-table http://bootstrap-table.wenzhixin.net.cn/ -->
<!--bootstrap-table扩展bootstrap-table-reorder-rows https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/reorder-rows -->
<!--插件：jquery.tablednd.js -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
<script type="text/javascript">
$(function () {
$("#tableId").bootstrapTable({
reorderableRows: true,
onReorderRowsDrag: function (table, row) {
console.log()
},
onReorderRowsDrop: function (table, row) {
console.log()
},
onReorderRow: function (newData) {
console.log()
}
}); });
</script>
</head>
<body>
<h2>Drag the table--Neven.Jr Production</h2>
<table class="bordered" id="tableId">
<thead> <tr>
<th>#</th>
<th>IMDB Top Movies</th>
<th>Year</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td></td>
<td>The Shawshank Redemption</td> <td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>The Godfather</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr> <td></td>
<td>The Godfather: Part II</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>The Good, the Bad and the Ugly</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>Pulp Fiction</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td> Angry Men</td> <td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>Schindler's List</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr> <td></td>
<td>One Flew Over the Cuckoo's Nest</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr>
<td></td>
<td>The Dark Knight</td> <td></td>
<td>
<a href="javascript:void(0);">Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr>
<tr class="nodrop nodrag">
<td></td>
<td>The Lord of the Rings: The Return of the King</td>
<td></td>
<td>
<a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>
<a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>
</td>
</tr> </table>
<br>
</body>
</html>
https://files.cnblogs.com/files/xuguanghui/table%E8%A1%8C%E6%8B%96%E6%8B%BD.rar
或者使用sorttable插件： http://jqueryui.com/sortable/
table行拖拽的更多相关文章
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- Jquery easyui treegrid实现树形表格的行拖拽
前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...
- jqGrid之treeGrid及行拖拽
单纯的做个小记录 今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录 treeGrid 树表格的应用在官网给出了很直白的例子: 1.http://blog.mn886.ne ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- Dev GridView行拖拽
http://blog.csdn.net/keyrainie/article/details/8513802 http://www.cnblogs.com/qq4004229/archive/2012 ...
- devpress 的gridview 控件的行拖拽 z
首先,添加引用:using DevExpress.XtraGrid.Views.Grid.ViewInfo; gridControl1.AllowDrop = true; ...
- ListView 多行拖拽排序
核心代码:修改ListView的属性,及绑定事件 // 初始化listView1. private void InitializeListView() { listView1.AllowDrop = ...
- jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
随机推荐
- Ubuntu环境下No module named '_tkinter'错误的解决
在Ubuntu环境下运行下面代码: import matplotlib as plt 出现以下错误: No module named '_tkinter' 解决方法: sudo apt-get ins ...
- DP---(POJ1159 POJ1458 POJ1141)
POJ1159,动态规划经典题目,很适合初学者入门练手. 求:为了使字符串左右对称,应该插入的最小字符数目. 设字符串为S1 S2 S3 - Sn. 这个字符串有n个字符,根据DP的基本思路,减少问题 ...
- （一）Tensorflow安装
主要包括下面两个指令: $ sudo apt-get install python-pip python-dev $ sudo pip install --upgrade https://storag ...
- 奇异值分解(SVD)原理详解及推导 （转载）
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/43053513 在网上看到有很多文章介绍SVD的,讲的也都不错,但是感觉还是有 ...
- javascript 分号理解
javascript自动填补分号的规则 在说要不要写分号之前,先了解一下javascript自动填补分号的规则. 在<javascript权威指南>中有一段话“如果一条语句以“(”.“[” ...
- Java设计模式 - 单例模式 (懒汉方式和饿汉方式）
概念: Java中单例模式是一种常见的设计模式,单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 单例模式的写法有好几种,这 ...
- mysql项目路径URL编码
jdbc_url=jdbc:mysql://127.0.0.1:3306/test?serverTimezone=UTC&useUnicode=true&characterEncodi ...
- Spring注解原理
一.注解的基本概念和原理及其简单实用 注解(Annotation)提供了一种安全的类似注释的机制,为我们在代码中添加信息提供了一种形式化得方法,使我们可以在稍后某个时刻方便的使用这些数据(通过解析注解 ...
- 第139天：详解cookie、 sessionStorage 和localStorage
1.cookie:存储在用户本地终端上的数据.有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密.一般应用最典型的案列就是判断注册用户是否 ...
- 题解 P1478 【陶陶摘苹果（升级版）】
看着你们累死累活得快排.冒泡.结构体特殊冒泡.还有dp... 蒟蒻表示真的不用那么麻烦! 难度:新手村+1 压行情况:0 理解难度:0 首先我们来了解一下优先队列:(自己抄的自己...) 讲元素一个个 ...