实现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表格拖拽的更多相关文章

  1. react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序）

    表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...

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

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

  3. 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例

    上一次学习了html5的drag和drop方法,传送门  就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...

  4. js表格拖拽

    html部分 <div id="chenkbox"> <div id="tableSort"> <ol> <li> ...

  5. 基于Vue实现可以拖拽的树形表格（原创）

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

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

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

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

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

  8. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  9. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

随机推荐

  1. [webpack]webpack打包优化

    1.import优化 a.tree-shaking 把没用到的代码删除掉,import 在生产环境下 会自动去除掉没用的代码 b.scope hosting 作用域提升,在webpack中会自动省略一 ...

  2. spring的事务是什么？与数据库的事务是否一样

    spring的事务是什么?与数据库的事务是否一样 先说一下什么是事务,事务:是对数据库的一些列操作. 之前一直觉得事务只针对于数据库当中,5种隔离级别,7种传播行为,后来才发现这是针对Spring的, ...

  3. CentOS7下搭建zabbix监控（四）——Zabbix报警设置

    CentOS7下搭建zabbix监控(一)——Zabbix监控端配置 CentOS7下搭建zabbix监控(二)——Zabbix被监控端配置 CentOS7下搭建zabbix监控(三)——Zabbix ...

  4. Java使用Apache Commons Exec运行本地命令行命令

    首先在pom.xml中添加Apache Commons Exec的Maven坐标: <!-- https://mvnrepository.com/artifact/org.apache.comm ...

  5. MyBatis 的案例

    首先我们需要先下载jar包 其次我们书写具体的内容 Student  Class package entity; /* * 学生类 * */ public class Student { //学生编号 ...

  6. 第二十三章 多项目集中权限管理及分布式会话——《跟我学Shiro》

    二十三章 多项目集中权限管理及分布式会话——<跟我学Shiro> 博客分类: 跟我学Shiro 跟我学Shiro  目录贴:跟我学Shiro目录贴 在做一些企业内部项目时或一些互联网后台时 ...

  7. CentOS系统安装启动tomcat

    我们可以通过xftp工具将tomcat文件上传至CentOS系统指定文件夹中 一.安装tomcat 进入tomcat存放目录解压: tar -zxf apache-tomcat-9.0.2.tar.g ...

  8. 在eNSP下使用Hybird接口

    1.实验拓扑图 2.实验编址表 3.实验过程 按照拓扑图设置各个PC机的IP地址 双击PC1然后弹出对话框,依次设置主机名:PC1→IP地址:192.168.1.1→子网掩码:255.255.255. ...

  9. 《Mysql 锁 - 概述》

    一:锁类型(加锁范围区分类型) - MySQL里面的锁可以分为:全局锁.表级锁.行级锁. 二:全局锁 - 作用 -  对整个数据库实例加锁. - 加锁方式 - MySQL提供加全局读锁的方法:Flus ...

  10. 路由 router-view

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, ...