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代码, ...
随机推荐
- "助成"招聘网站视频简介
我们小组为我们的作品录制了一个一分多钟的电梯介绍视频,这是视频连接,我上传到了优酷上:http://v.youku.com/v_show/id_XMzIzMTc1ODc2NA==.html?spm=a ...
- A9
今日内容: 解决队友提出的问题 明日计划: 商讨界面还有哪些不足的地方 困难: 每天大部分时间被电工实习占走了
- C语言的问卷调查
1.你对自己的未来有什么规划?做了哪些准备? 未来想当一个网络工程师,为了这个目标我正在努力学习网络.网页及相关的知识. 2.你认为什么是学习?学习有什么用?现在学习动力如何?为什么? 学习就是不断尝 ...
- Mac下Java JNI 调C
简介 JNI的实现步骤如下: 编写带有native声明的方法的Java类 使用javac命令编译编写的Java类 使用java -jni className 来生成后缀名为.h的头文件 使用其他语言( ...
- MySQL---索引算法B+/B-树原理(一)
B-树 1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树: ⑴树中每个结点至多有m 棵子树: ⑵若根结点不是叶子 ...
- 【经典数据结构】Trie
在计算机科学中,trie,又称前缀树或字典树,是一种有种树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的所有子孙都有相同的前 ...
- 【Linux笔记】Linux中inittab剖析
Linux完成内核(Kernel)引导后,会由init初始化进程调用/etc/inittab配置文件(ps -aux | less,init进程号为始终为1,是所有系统进程的起点,init进程也有一个 ...
- 'phantomjs.exe' executable needs to be in PATH. (selenium PhantomJS python)
今天selenium PhantomJS python用了下,发现报错,提示我:'phantomjs.exe' executable needs to be in PATH. from seleniu ...
- 我的bootstrap学习
前端开发框架bootstrap Bootstrap 安装 <link ref="stylesheet" href="bs/css/bootstrap.css ...
- click()、bind()、live()和delegate()方法
我之前使用click()比较多,又来因为网页内容需要前端生成用了live().有的时候使用click()和bind()分不清楚该怎么试用.查了很多资料.测试了很多次,自己明白了. 总结如下:代码注释很 ...