实现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. SpringBoot之封装json对象返回json数据

    /** * @description:封装json对象,所有返回结果都使用它 **/ public class Result<T> { private int code;// 业务自定义状 ...

  2. fileBeat的简单使用

    Beat的简单使用 Filebeat配置 Output 常见日志格式封装 简单使用filebeat格式化nginx日志 Filebeat的配置: # 修改filebeat.yml # vim file ...

  3. connections java.net.BindException: Address already in use_解决方案

    一.问题描述 在Linux服务器(CentOS7系统)中配置并启动JMeter远程监控服务器资源所需的ServerAgent目录下的 startAgent.sh 文件时,系统出现异常提示,如 [roo ...

  4. python线程池（转）

    ThreadPool: #! /usr/bin/env python # -*- coding: utf-8 -*- import threadpool import time def sayhell ...

  5. nginx+lua 设置跨域

    nginx 配置: header_filter_by_lua_file cros.lua; access_by_lua ' if ngx.var.request_method == "OPT ...

  6. spring bean容器加载后执行初始化处理@PostConstruct

    先说业务场景,我在系统启动后想要维护一个List常驻内存,因为我可能经常需要查询它,但它很少更新,而且数据量不大,明显符合缓存的特质,但我又不像引入第三方缓存.现在的问题是,该List的内容是从数据库 ...

  7. 123457123456---com.threeObj3.BabyShizi02--- 宝宝识字02

    com.threeObj3.BabyShizi02--- 宝宝识字02

  8. JS时间转换，url编码，jquery返回类型等问题

    1.当时间被转换为json格式后会被转换成 /Date(...)/ 这种格式,其中...为时间转换成妙后的一串整数 function changeDateFormat(cellval) { )); v ...

  9. Laravel 别名Redis 与 Redis 扩展冲突

    use Redis; //通过别名引用会报错 今天尝试使用了 Laravel 的 redis 结果报了如下错误. Non-static method Redis::xxx() cannot be ca ...

  10. MediaElement 不能显示的问题

    1.记得在窗体的 Load 事件里面调用 Player1.Play();方法,就可以在窗体加载后就直接播放视频 2.WPF MediaElement其实和Windows系统自带的播放器是一样的,因此W ...