html中设置表格行可拖拽,BootStrap table实现表格行拖拽效果

本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码，供大家参考，具体内容如下

不上图了

首先还是得添加三个文件，自己上网搜搜就行

前台，加在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

JavaScriptSerializer serializer = new JavaScriptSerializer();

List list = serializer.Deserialize>(jsondata);

BLL.Base.WorkFlow bllworkflow = new BLL.Base.WorkFlow();

var result = bllworkflow.Sort(list);

return result;

}

排序的思路：当前台拖动完成后，将整个表格数据传入后台，先删除之前数据库中的数据，重新保存当前数据实现排序。

缺点：  如果你有分页显示，返回的Table数据只为第一页的。第二页就会出现排序问题。

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