欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrap table實(shí)現(xiàn)表格行拖拽效果

 更新時間:2018年12月01日 08:36:44   作者:GitLuckyd  
這篇文章主要為大家詳細(xì)介紹了BootStrap table實(shí)現(xiàn)表格行拖拽效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了BootStrap table實(shí)現(xiàn)表格行拖拽的具體代碼,供大家參考,具體內(nèi)容如下

不上圖了

首先還是得添加三個文件,自己上網(wǎng)搜搜就行

<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 屬性里面  

//當(dāng)選中行,拖拽時的哪行數(shù)據(jù),并且可以獲取這行數(shù)據(jù)的上一行數(shù)據(jù)和下一行數(shù)據(jù)
   onReorderRowsDrag: function(table, row) {
    //取索引號
    dragbeforeidx = $(row).attr("data-index");
   },
   //拖拽完成后的這條數(shù)據(jù),并且可以獲取這行數(shù)據(jù)的上一行數(shù)據(jù)和下一行數(shù)據(jù)
   onReorderRowsDrop: function (table, row) {
    //取索引號
    draglateridx = $(row).attr("data-index");
   },
   //當(dāng)拖拽結(jié)束后,整個表格的數(shù)據(jù)
   onReorderRow: function (newData) {
    //這里的newData是整個表格數(shù)據(jù),數(shù)組形式
    if (dragbeforeidx != draglateridx) {//這是我其他地方需要的,你們可不必要這個
     //console.log(newData); 調(diào)試用代碼
     $.post("Sort",
      { jsondata: JSON.stringify(newData) },//將整張表數(shù)據(jù)Post,當(dāng)然,先序列化成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;
  }

排序的思路:當(dāng)前臺拖動完成后,將整個表格數(shù)據(jù)傳入后臺,先刪除之前數(shù)據(jù)庫中的數(shù)據(jù),重新保存當(dāng)前數(shù)據(jù)實(shí)現(xiàn)排序。

缺點(diǎn):  如果你有分頁顯示,返回的Table數(shù)據(jù)只為第一頁的。第二頁就會出現(xiàn)排序問題。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論