本文實(shí)例為大家分享了BootStrap table實(shí)現(xiàn)表格行拖拽的具體代碼，供大家參考，具體內(nèi)容如下
不上圖了
首先還是得添加三個(gè)文件，自己上網(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="external nofollow" rel="stylesheet"/>
前臺(tái)，加在Bootstrap Table 屬性里面
//當(dāng)選中行，拖拽時(shí)的哪行數(shù)據(jù)，并且可以獲取這行數(shù)據(jù)的上一行數(shù)據(jù)和下一行數(shù)據(jù) onReorderRowsDrag: function(table, row) { //取索引號(hào) dragbeforeidx = $(row).attr("data-index"); }, //拖拽完成后的這條數(shù)據(jù)，并且可以獲取這行數(shù)據(jù)的上一行數(shù)據(jù)和下一行數(shù)據(jù) onReorderRowsDrop: function (table, row) { //取索引號(hào) draglateridx = $(row).attr("data-index"); }, //當(dāng)拖拽結(jié)束后，整個(gè)表格的數(shù)據(jù) onReorderRow: function (newData) { //這里的newData是整個(gè)表格數(shù)據(jù)，數(shù)組形式 if (dragbeforeidx != draglateridx) {//這是我其他地方需要的，你們可不必要這個(gè) //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'); } }); } }后臺(tái)代碼Controller
public string Sort(string jsondata) { //將json序列化為L(zhǎng)ist<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)前臺(tái)拖動(dòng)完成后，將整個(gè)表格數(shù)據(jù)傳入后臺(tái)，先刪除之前數(shù)據(jù)庫(kù)中的數(shù)據(jù)，重新保存當(dāng)前數(shù)據(jù)實(shí)現(xiàn)排序。
缺點(diǎn)： 如果你有分頁(yè)顯示，返回的Table數(shù)據(jù)只為第一頁(yè)的。第二頁(yè)就會(huì)出現(xiàn)排序問(wèn)題。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
