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)文章
利用原生JS實(shí)現(xiàn)歡樂水果機(jī)小游戲
這篇文章主要介紹了利用原生JS實(shí)現(xiàn)歡樂水果機(jī)小游戲,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04使用JS實(shí)現(xiàn)圖片展示瀑布流效果(簡單實(shí)例)
下面小編就為大家?guī)硪黄褂肑S實(shí)現(xiàn)圖片展示瀑布流效果(簡單實(shí)例)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09JavaScript 提升運(yùn)行速度之循環(huán)篇 譯文
根據(jù)Nicholas 的說法,有四種代碼 會拖慢腳本的運(yùn)行,并最終導(dǎo)致腳本失控。分別是次數(shù)過多的同步循環(huán)、龐大的函數(shù)體、不恰當(dāng)?shù)倪f歸和不合理的DOM 調(diào)用。2009-08-08JS實(shí)現(xiàn)的簡潔縱向滑動菜單(滑動門)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的簡潔縱向滑動菜單(滑動門)效果,通過簡單的頁面元素遍歷實(shí)現(xiàn)華東切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10javascript中的prototype屬性使用說明(函數(shù)功能擴(kuò)展)
一說到prototype很多人可能第一個想到的是著名的prototype.js框架,當(dāng)然我們今天說的不是它,而是Javascript中的prototype屬性,一般都被翻譯為“原型”。2010-08-08JavaScript大數(shù)相加相乘的實(shí)現(xiàn)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript大數(shù)相加相乘的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10