实现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. 一台java服务器可以跑多少个线程？

    一台java服务器能跑多少个线程?这个问题来自一次线上报警如下图,超过了我们的配置阈值.   京东自研UMP监控分析 打出jstack文件,通过IBM Thread and Monitor Dump ...

  2. centos6.8yum 安装mysql

    1:查看是否已有mysql版本 rpm -qa | grep mysql 删除mysql 账号和用户组 删除/etc/my.cnf 2:有的话就删除 rpm -e mysql-...... 或者 co ...

  3. 实现下拉弹出视图和Block的简单实现

    实现效果如下: 实现代码如下: @interface ViewController ()<UIViewControllerTransitioningDelegate> { UILabel ...

  4. python 创建虚拟环境（virtualenv）

    原文地址:https://www.jianshu.com/p/2645d8f2e690 另附连接:Linux环境下虚拟环境virtualenv安装和使用 virtualenv 安装 1.Install ...

  5. 图形学入门(3)——区域填充算法(region filling)

    继续图形学之旅,我们已经解决了如何画线和画圆的问题,接下来要解决的是,如何往一个区域内填充颜色?对一个像素填充颜色只需调用SetPixel之类的函数就行了,所以这个问题其实就是:如何找到一个区域内的所 ...

  6. 到处抄来的SUCTF2019 web wp

    0x01 EasySQL 这是一个考察堆叠注入的题目,但是这道题因为作者的过滤不够完全所以存在非预期解 非预期解 直接构造 *,1 这样构造,最后拼接的查询语句就变成了 select *,1||fla ...

  7. table列表全选

    <table><tr><td><input type="checkbox" /></td><td></ ...

  8. HTTP网页请求状态码

    我们平时在打开一些网页的时候,会遇到打不开的情况,页面提示404错误,这个404就是http状态码.如果我们可以正常打开网页,这时也会有http状态码的,这个状态码就是200,只不过这时我们是无法通过 ...

  9. C++:标准模板库vector

    一:介绍 vector是C++标准模板库,是一个容器,底层是数组,为连续内存. 命名空间为std,所属头文件为<vector>   注意:不是<vector.h> vector ...

  10. Python——类和对象（一）

    一.定义类 在面向对象的程序设计中有两种重要概念: 类:可以理解为一个种类,一个模型,是一种抽象的东西. 实例.对象:可以理解为一种具体制作或者存在的东西. 定义类的语法格式如下: class 类名: ...