实现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. VSCode 设置 Tab 空格

    Windows 点击左下角的 Setting 按钮 输入 tabSize 进行查找

  2. labelimg data

    <annotation> <folder>img_data_box_1500</folder> <filename>798.jpg</filena ...

  3. MySQL数据库之sql_mode解释

    在MySQL5.6中,默认的SQL模式为:NO_ENGINE_SUBSTITUTION, 而在MySQL5.7中默认的SQL模式为:ONLY_FULL_GROUP_BY, STRICT_TRANS_T ...

  4. Github排名靠前的iOS库

    //iOS第三方开源库的吐槽和备忘 http://blog.ibireme.com/2013/09/23/ios-third-party-libs/#more-41361 //整理了一份Github上 ...

  5. 微信小程序之对象转化为数组

    对象转成数组方式一(数组里面是一个个number类型的元素) let dictObject= { , , , , }; // 对象转成数组方式一 var createArr = [] for (let ...

  6. 关于新小米盒子的Recovery模式如何进入

    26日下的盒子订单,经过几经波折,终于在昨天来到了我的面前,新东西到手,难免少不了一些折腾:升级系统,安装软件等.一顿折腾之后,想完全恢复到出厂设置,给盒子清一下,想进入盒子的Recovery模式,按 ...

  7. iOS-MMDrawerController第三方库的使用（转）

    链接:https://github.com/mutualmobile/MMDrawerController ,根据导航item+滚动条progressView实现的手势滑动切换视图的 MMDrawer ...

  8. 01.轮播图之三 ： collectionView 轮播

    个人觉得 collection view 做轮播是最方便的,设置下flowlayout 其他不会有很大的变动,没有什么逻辑的代码 let's begin…… 创建自定义的view .h 声明文件 @i ...

  9. 【RobotFramework-RequestsLibrary】post方法data<empty>为空问题

    日志提示data<empty> 只是因为post requset关键字需要data的值为字典格式,上面set variable将data变为了字符串,所以提示程序异常,这一点可以在post ...

  10. 渡鸦币（Raven）钱包交叉编译详解

    1 环境准备 1.1 准备Ubuntu 准备虚拟机或物理机,操作系统为Ubuntu 16.04 1.2 安装Mingw sudo apt-get install g++-mingw-w64-i686 ...