BootStrap table实现表格行拖拽效果

 更新时间:2018年12月01日 08:36:44   作者:GitLuckyd  
这篇文章主要为大家详细介绍了BootStrap table实现表格行拖拽效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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数据只为第一页的。第二页就会出现排序问题。

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

相关文章

  • JS实现带提示的星级评分效果完整实例

    JS实现带提示的星级评分效果完整实例

    这篇文章主要介绍了JS实现带提示的星级评分效果,以完整实例形式较为详细的分析了JavaScript响应鼠标事件动态变换页面元素样式的相关技巧,非常简单实用的代码,需要的朋友可以参考下
    2015-10-10
  • JS实现仿QQ效果的三级竖向菜单

    JS实现仿QQ效果的三级竖向菜单

    这篇文章主要介绍了JS实现仿QQ效果的三级竖向菜单,以实例形式分析了JavaScript遍历页面元素及动态改变页面css样式的技巧,需要的朋友可以参考下
    2015-09-09
  • Node.js API详解之 zlib模块用法分析

    Node.js API详解之 zlib模块用法分析

    这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • js中indexOf()的简单使用示例

    js中indexOf()的简单使用示例

    indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,下面这篇文章主要给大家介绍了关于js中indexOf()简单使用的相关资料,需要的朋友可以参考下
    2023-01-01
  • 使用canvas进行图像编辑的实例

    使用canvas进行图像编辑的实例

    下面小编就为大家带来一篇使用canvas进行图像编辑的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 微信小游戏之使用three.js 绘制一个旋转的三角形

    微信小游戏之使用three.js 绘制一个旋转的三角形

    three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。这篇文章主要介绍了微信小游戏之使用three.js 绘制一个旋转的三角形,需要的朋友可以参考下
    2019-06-06
  • 如何用js控制frame的隐藏或显示的解决办法

    如何用js控制frame的隐藏或显示的解决办法

    如何用js控制frame的隐藏或显示的解决办法,需要的朋友可以参考一下
    2013-03-03
  • JavaScript设置获取和设置属性的方法

    JavaScript设置获取和设置属性的方法

    这篇文章主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下
    2015-03-03
  • echarts折线图每段显示不同的颜色的实现

    echarts折线图每段显示不同的颜色的实现

    本文主要介绍了echarts折线图每段显示不同的颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • 关于uniapp微信小程序左上角返回按钮的监听详解

    关于uniapp微信小程序左上角返回按钮的监听详解

    uniapp是一个支持多端的技术,因此它是兼容性比较强的,而且速度也很快,下面这篇文章主要给大家介绍了关于uniapp微信小程序左上角返回按钮监听的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论