实现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. JavaScript的深拷贝

    javaScript的拷贝有浅拷贝和深拷贝.拷贝我们一般拷贝对象,获取对象的内容(字段.函数)都给复制一遍 浅拷贝:一般只是简单的赋值 //浅拷贝 var obj1={name:"cat&q ...

  2. Foxmail找回密码 及 Wireshark 使用【我】

    Foxmail中设置了密码,但是时间长忘了,现在要用,需要弄出来 首先,安装 Wireshark 抓包工具 一路下一步即可, 安装完确保这个图标表示的组件已经安装: 如果没有安装,在Wireshark ...

  3. QSplitter的使用案例

    #include <QApplication> #include <QSplitter> #include <QTextEdit> #include <QTe ...

  4. jvm 指令重排

    引言:在Java中看似顺序的代码在JVM中,可能会出现编译器或者CPU对这些操作指令进行了重新排序:在特定情况下,指令重排将会给我们的程序带来不确定的结果..... 1.  什么是指令重排? 在计算机 ...

  5. OO ALV事件里使用E消息，下一步会退出到系统初始界面

    在OO ALV  data_change事件时(选中行),锁定KEY值, 继续,取消选择,退出到系统初始界面 改成 pv_status = 'E'. pv_msg = '采购订单' && ...

  6. LeetCode_111. Minimum Depth of Binary Tree

    111. Minimum Depth of Binary Tree Easy Given a binary tree, find its minimum depth. The minimum dept ...

  7. END使用

    [root@bogon ~]# cat d.sh #!/bin/bash#. /etc/init.d/functionscat <<END+------------------------ ...

  8. 使用 Sublime + PlantUML 高效地画图

    转自 http://www.jianshu.com/p/e92a52770832

  9. maven项目创建.m2文件夹

    创建为.m2.,m2前后都要有点,然后去掉后面的点 settings.xml文件如下: <?xml version="1.0" encoding="UTF-8&qu ...

  10. list自定义排序工具类

    工具类 package sort; import java.lang.reflect.Method; import java.text.Collator; import java.util.Compa ...