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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
vue中element 上传功能的实现思路
Jul 06 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图片验证码代码
2008/03/27 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
php取出数组单个值的方法
2018/03/12 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
django使用channels实现通信的示例
2020/10/19 Python
python 操作excel表格的方法
2020/12/05 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
C#笔试题集合
2013/06/21 面试题
物流管理专业求职信
2014/05/29 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
导游词之镇江焦山
2019/11/21 职场文书