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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
一次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之第五天
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Python sys.path详细介绍
2013/10/17 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python中可以声明变量类型吗
2020/06/18 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
妇产医师自荐信
2014/01/29 职场文书
公司员工活动策划方案
2014/08/20 职场文书
企业领导对照检查材料
2014/08/20 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
领导干部考核评语
2015/01/04 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
新闻稿怎么写
2015/07/18 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android