首页 > 开发 > JS > 正文

BootStrap table实现表格行拖拽效果

2024-05-06 16:46:59
字体:
来源:转载
供稿:网友

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

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


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表