实现Bootstrap表格拖拽：

需要引入jquery.min.js、bootstrap相关文件,以及jquery.dragsort-0.5.2.js

代码如下：

  1.  <html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  5.      <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
  6.      <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
  7.      <script type="text/javascript" src="jquery.dragsort-0.5.2.js"></script>
  8.  
  9.      <style>
  10.          #field_list_table tr, th, td {
  11.              text-align: center;
  12.              height: 4.5em;
  13.          }
  14.          #field_list_table {
  15.              margin-bottom: 0px;
  16.              border-collapse: collapse;
  17.          }
  18.      </style>
  19.  </head>
  20.  <body>
  21.      <table class="table table-striped  table-bordered table-hover"
  22.         id="field_list_table">
  23.          <thead id="gridThead">
  24.                  <tr style="cursor: pointer;">
  25.                      <td class="listHeadCell">编号</td>
  26.                      <td class="listHeadCell">名称</td>
  27.                  </tr>
  28.          </thead>
  29.          <tbody id="gridtbody">
  30.              <tr>
  31.                  <td></td>
  32.                  <td>名称1</td>
  33.              </tr>
  34.              <tr>
  35.                  <td></td>
  36.                  <td>名称2</td>
  37.              </tr>
  38.              <tr>
  39.                  <td></td>
  40.                  <td>名称3</td>
  41.              </tr>
  42.              <tr>
  43.                  <td ></td>
  44.                  <td>名称4</td>
  45.              </tr>
  46.          </tbody>
  47.      </table>
  48.      <script>
  49.          $(function () {
  50.              // 刚开始的时候给每个tr一个序号，用于初始化,由于都是后台脚本通过模版引擎遍历输出，此处不多点缀。
  51.              var len = $('#field_list_table tr').length;
  52.              for (var i = 1; i < len; i++) {
  53.                  $('#field_list_table tr:eq(' + i + ') td:first').html("<span class='badge'>" + i + "</span>");
  54.                  $('#field_list_table tr:eq(' + i + ') td:nth-child(2)').html("i am number " + i + "！");
  55.              }
  56.              //拖拽排序
  57.              $("#gridtbody").dragsort({
  58.                  itemSelector: "tr",
  59.                  dragSelector: "tr",
  60.                  dragBetween: false,
  61.                  //dragEnd: saveOrder1(),//拖拽完成后调用方法
  62.                  placeHolderTemplate: "<tr><td></td></tr>"
  63.              });
  64.          });
  65.      </script>
  66.  </body>
  67.  </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. VS中卸载Visual Assist X

    Tools=>Extensions and updates=>找到Visual Assist X 卸载:

  2. Android Studio创建Module-库模块

    Android Studio创建Module-库模块   本文链接:https://blog.csdn.net/niuba123456/article/details/81049676 模块是源文件和 ...

  3. Windows 操作系统 端口转发

    在Windows 下可以使用netsh interface portproxy 命令实现端口转发功能. 例:netsh interface portproxy add v4tov4 listenpor ...

  4. Javescript——数据类型

    原文链接:Understanding Data Types in JavaScript Data types are used to classify one particular type of d ...

  5. 123457123457#0#-----com.threeapp.renzhepaoku01----儿童跑酷游戏（忍者版）

    com.threeapp.renzhepaoku01----儿童跑酷游戏(忍者版)

  6. PAT 甲级 1039 Course List for Student (25 分)（字符串哈希,优先队列,没想到是哈希）*

    1039 Course List for Student (25 分)   Zhejiang University has 40000 students and provides 2500 cours ...

  7. iOS-类似微信摇一摇

    首先,一直以为摇一摇的功能实现好高大上,结果百度了.我自己也模仿写了一个demo.主要代码如下: 新建一个项目,名字为AnimationShake. 主要代码: - (void)motionBegan ...

  8. EasyNetQ使用(九)【非泛型的发布&订阅扩展方法，发生错误的情况 】

    自从EasyNetQ第一个版本开始,它就可以发布/订阅特定类型的消息. bus.Subscribe<MyMessage>("subscriptionId", x =&g ...

  9. Oracle数据同步交换

    一.为了解决数据同步汇聚,数据分发,数据转换,数据维护等需求,TreeSoft将复杂的网状的同步链路变成了星型数据链路.     TreeSoft作为中间传输载体负责连接各种数据源,为各种异构数据库之 ...

  10. 【miscellaneous】MPEG2、MPEG4、H264的差异

    MPEG2.MPEG4.H264的差异 MPEG-2简介 MPEG-2制定于1994年,设计目标是高级工业标准的图象质量以及更高的传输率.MPEG-2所能提供的传输率在3-10Mbits/sec间,其 ...