BootStrap table實(shí)現(xiàn)表格行拖拽效果
本文實(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="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ù)庫中的數(shù)據(jù),重新保存當(dāng)前數(shù)據(jù)實(shí)現(xiàn)排序。
缺點(diǎn): 如果你有分頁顯示,返回的Table數(shù)據(jù)只為第一頁的。第二頁就會(huì)出現(xiàn)排序問題。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)帶提示的星級(jí)評(píng)分效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)帶提示的星級(jí)評(píng)分效果,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用的代碼,需要的朋友可以參考下2015-10-10
JS實(shí)現(xiàn)仿QQ效果的三級(jí)豎向菜單
這篇文章主要介紹了JS實(shí)現(xiàn)仿QQ效果的三級(jí)豎向菜單,以實(shí)例形式分析了JavaScript遍歷頁面元素及動(dòng)態(tài)改變頁面css樣式的技巧,需要的朋友可以參考下2015-09-09
微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形
three.js是一個(gè)可以使用javascript繪制3d圖形的庫,它對(duì)WebGL的api進(jìn)行封裝,使開發(fā)更加方便,就像jQuery對(duì)DOM的api進(jìn)行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形,需要的朋友可以參考下2019-06-06
JavaScript設(shè)置獲取和設(shè)置屬性的方法
這篇文章主要介紹了JavaScript設(shè)置獲取和設(shè)置屬性的方法,學(xué)會(huì)使用getAttribute、setAttribute的用法,需要的朋友可以參考下2015-03-03
echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn)
本文主要介紹了echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽詳解
uniapp是一個(gè)支持多端的技術(shù),因此它是兼容性比較強(qiáng)的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的相關(guān)資料,需要的朋友可以參考下2022-04-04

