BootStrap table實現(xiàn)表格行拖拽效果
本文實例為大家分享了BootStrap table實現(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ù)實現(xiàn)排序。
缺點: 如果你有分頁顯示,返回的Table數(shù)據(jù)只為第一頁的。第二頁就會出現(xiàn)排序問題。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小游戲之使用three.js 繪制一個旋轉(zhuǎn)的三角形
three.js是一個可以使用javascript繪制3d圖形的庫,它對WebGL的api進(jìn)行封裝,使開發(fā)更加方便,就像jQuery對DOM的api進(jìn)行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個旋轉(zhuǎn)的三角形,需要的朋友可以參考下2019-06-06
JavaScript設(shè)置獲取和設(shè)置屬性的方法
這篇文章主要介紹了JavaScript設(shè)置獲取和設(shè)置屬性的方法,學(xué)會使用getAttribute、setAttribute的用法,需要的朋友可以參考下2015-03-03
關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽詳解
uniapp是一個支持多端的技術(shù),因此它是兼容性比較強的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的相關(guān)資料,需要的朋友可以參考下2022-04-04

