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压缩混淆工具
May 16 Javascript
将list转换为json失败的原因
Dec 17 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
vue 2.0封装model组件的方法
Aug 03 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
Vue中的transition封装组件的实现方法
Aug 13 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
JS面向对象编程浅析
2011/08/28 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python实现Adapter模式实例代码
2018/02/09 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
捐款倡议书范文
2014/02/02 职场文书
移风易俗倡议书
2014/04/15 职场文书
2014年保育员工作总结
2014/12/02 职场文书