溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了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數據只為第一頁的。第二頁就會出現排序問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
