实现Bootstrap表格拖拽
实现Bootstrap表格拖拽：
需要引入jquery.min.js、bootstrap相关文件,以及jquery.dragsort-0.5.2.js
代码如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.5.2.js"></script> <style>
#field_list_table tr, th, td {
text-align: center;
height: 4.5em;
}
#field_list_table {
margin-bottom: 0px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover"
id="field_list_table">
<thead id="gridThead">
<tr style="cursor: pointer;">
<td class="listHeadCell">编号</td>
<td class="listHeadCell">名称</td>
</tr>
</thead>
<tbody id="gridtbody">
<tr>
<td></td>
<td>名称1</td>
</tr>
<tr>
<td></td>
<td>名称2</td>
</tr>
<tr>
<td></td>
<td>名称3</td>
</tr>
<tr>
<td ></td>
<td>名称4</td>
</tr>
</tbody>
</table>
<script>
$(function () {
// 刚开始的时候给每个tr一个序号，用于初始化,由于都是后台脚本通过模版引擎遍历输出，此处不多点缀。
var len = $('#field_list_table tr').length;
for (var i = 1; i < len; i++) {
$('#field_list_table tr:eq(' + i + ') td:first').html("<span class='badge'>" + i + "</span>");
$('#field_list_table tr:eq(' + i + ') td:nth-child(2)').html("i am number " + i + "！");
}
//拖拽排序
$("#gridtbody").dragsort({
itemSelector: "tr",
dragSelector: "tr",
dragBetween: false,
//dragEnd: saveOrder1(),//拖拽完成后调用方法
placeHolderTemplate: "<tr><td></td></tr>"
});
});
</script>
</body>
</html>
实现Bootstrap表格拖拽的更多相关文章
- react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序）
表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例
上一次学习了html5的drag和drop方法,传送门 就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...
- js表格拖拽
html部分 <div id="chenkbox"> <div id="tableSort"> <ol> <li> ...
- 基于Vue实现可以拖拽的树形表格（原创）
因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
随机推荐
- VS版本 与 VC版本 的对应关系
Visual Studio 6 : vc6Visual Studio 2003 : vc7Visual Studio 2005 : vc8Visual Studio 2008 : vc9Visual ...
- python代码-leetcode1 两数相加
1.两个循环 class Solution: def twoSum(self, nums, target): n=len(nums) for i in range(n): for j in range ...
- 【转载】 迁移学习简介（tranfer learning）
原文地址: https://blog.csdn.net/qq_33414271/article/details/78756366 土豆洋芋山药蛋 --------------------------- ...
- java如何获取访问真实IP地址？
java如何获取访问真实IP地址 解决方法: 获取请求主机IP地址,如果通过代理进来,则透过防火墙获取真实IP地址,如果没有代理,则获取真实ip public static String getIp( ...
- InfluxDB+Grafana大数据监控系列之基础环境部署（一）
一.单节点环境部署 机器节点信息及 InfluxDB.Grafana 版本选择: 节点 Linux版本 部署服务 10.223.1.198 Centos 6.8 InfluxDB 1.7.7 10.2 ...
- RocketMQ共包含9个模块
rocketmq-common:通用的枚举.基类方法.或者数据结构,包名有admin.consumer.filter.hook.message rocketmq-remoting:使用netty的客户 ...
- react 打印页面怎么实现？
2017-11-10 react 打印页面怎么实现?
- 【ARTS】01_38_左耳听风-201900729~201900804
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- C#RSA加密解密(对接PHP)
上篇文章中写的RSA加密是针对C#的,现在外部调用的是PHP,我们平常见到的RSA无论公钥和私钥都是一长串数字,很显然C#生成的XML不是通用的加密.如果外部调用需要处理一下. 一.首先可以去网上找一 ...
- Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...