BootStrap table实现表格行拖拽效果


Posted in Javascript onDecember 01, 2018

本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码,供大家参考,具体内容如下

不上图了

首先还是得添加三个文件,自己上网搜搜就行

<script src="~/Content/bootstrap-table/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table-reorder-rows.js"></script>
<link href="~/Content/bootstrap-table/bootstrap-table-reorder-rows.css" rel="stylesheet"/>

前台,加在Bootstrap Table 属性里面  

//当选中行,拖拽时的哪行数据,并且可以获取这行数据的上一行数据和下一行数据
   onReorderRowsDrag: function(table, row) {
    //取索引号
    dragbeforeidx = $(row).attr("data-index");
   },
   //拖拽完成后的这条数据,并且可以获取这行数据的上一行数据和下一行数据
   onReorderRowsDrop: function (table, row) {
    //取索引号
    draglateridx = $(row).attr("data-index");
   },
   //当拖拽结束后,整个表格的数据
   onReorderRow: function (newData) {
    //这里的newData是整个表格数据,数组形式
    if (dragbeforeidx != draglateridx) {//这是我其他地方需要的,你们可不必要这个
     //console.log(newData); 调试用代码
     $.post("Sort",
      { jsondata: JSON.stringify(newData) },//将整张表数据Post,当然,先序列化成Json
      function(data) {
       if (data == "success") {
        $table.bootstrapTable('refresh');
       }
      });
    }
   }

后台代码Controller

public string Sort(string jsondata)
  {
   //将json序列化为List<T>
   JavaScriptSerializer serializer = new JavaScriptSerializer();
   List<WorkFlow> list = serializer.Deserialize<List<WorkFlow>>(jsondata);
   BLL.Base.WorkFlow bllworkflow = new BLL.Base.WorkFlow();
   var result = bllworkflow.Sort(list);
   return result;
  }

排序的思路:当前台拖动完成后,将整个表格数据传入后台,先删除之前数据库中的数据,重新保存当前数据实现排序。

缺点:  如果你有分页显示,返回的Table数据只为第一页的。第二页就会出现排序问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 #Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 #Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 #Javascript
JS实现图片拖拽交换效果
Nov 30 #Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 #Javascript
jQuery实现网页拼图游戏
Apr 22 #jQuery
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 #Javascript
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python with的用法
2014/08/22 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python导入模块交叉引用的方法
2019/01/19 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
django配置app中的静态文件步骤
2020/03/27 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
火锅店营销方案
2014/02/26 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
国庆宣传标语
2014/06/30 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
安全生产月标语
2014/10/07 职场文书
龙猫观后感
2015/06/09 职场文书
欠条样本
2015/07/03 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
JavaScript实现优先级队列
2021/12/06 Javascript