本文實例為大家分享了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數據只為第一頁的。第二頁就會出現排序問題。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答