微客导航 » 文章资讯 » BootStrap table实现表格行拖拽效果

BootStrap table实现表格行拖拽效果

2023-09-05 02:14:04 347

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

不上图了

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

前台，加在BootstrapTable属性里面

//当选中行，拖拽时的哪行数据，并且可以获取这行数据的上一行数据和下一行数据
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

publicstringSort(stringjsondata)
{
//将json序列化为List
JavaScriptSerializerserializer=newJavaScriptSerializer();
Listlist=serializer.Deserialize>(jsondata);
BLL.Base.WorkFlowbllworkflow=newBLL.Base.WorkFlow();
varresult=bllworkflow.Sort(list);
returnresult;
}

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

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

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

返回顶部
3162201930
czq8825@qq.com

BootStrap table实现表格行拖拽效果

热门推荐

随机推荐