本文實(shí)例為大家分享了BootStrap table實(shí)現(xiàn)表格行拖拽的具體代碼，供大家參考，具體內(nèi)容如下
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)紫陽(yáng),10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792
不上圖了
首先還是得添加三個(gè)文件，自己上網(wǎng)搜搜就行
前臺(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
JavaScriptSerializer serializer = new JavaScriptSerializer();
List list = serializer.Deserialize>(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
