JS組件BootstrapTable表格行拖拽效果實現(xiàn)代碼_javascript技巧

項目涉及到訂單模塊，那天突然接到一個需求，說是兩種不同狀態(tài)的訂單之間要實現(xiàn)插單的效果，頁面上呈現(xiàn)方式是：左右兩個Table，左邊Table里面是狀態(tài)為1的訂單，右邊Table里面是狀態(tài)為2訂單，左邊Table里面的行數(shù)據(jù)拖動到右邊Table里面指定行的位置，拖動完成后，左邊表格減少一行，右邊表格增加一行。除此之外，還需要撤銷操作(相當(dāng)于Ctrl + Z操作)，能夠返回到上一步的狀態(tài)。可能描述會讓大家模擬兩可，反正已經(jīng)實現(xiàn)了，先來看看效果圖吧。

1、先看看拖動之前的效果

2、這是拖動左邊表格行數(shù)據(jù)的效果

3、拖動一行完成之后表格數(shù)據(jù)的效果

4、第二次、第三次拖動完成后效果

5、右邊表格上面撤銷操作點(diǎn)擊效果

6、多次點(diǎn)擊撤銷，表格回到初始狀態(tài)

二、代碼示例
接到需求的第一感覺是應(yīng)該上Bootstrap table api里面找一下，畢竟開源的力量是強(qiáng)大的，或許有相關(guān)的示例呢。經(jīng)過一番查找，很可惜，Bootstrap Table沒有這種兩張表格之間的操作。想想其實也可以理解，Bootstrap Table是針對某個動態(tài)表格數(shù)據(jù)綁定的，它的側(cè)重點(diǎn)是表格內(nèi)部的功能，比如表格內(nèi)部行的拖拽排序(Reorder Rows)有很好的解決方案，對于像博主這樣的特殊需求，似乎也應(yīng)該自己去實現(xiàn)。
1、需求分析
既然決定自己去寫，開始分析需求，似乎這個操作里面比較困難的是拖拽效果，說到拖拽效果，原來使用JsPlumb的時候那使用太多了，于是就想到了我們神奇的JQuery UI里面的draggable.js 和droppable.js。拖拽的問題解決了，那么還有一個難點(diǎn)，就是撤銷操作怎么辦？我們知道Ctrl+z的意思是還原，什么叫還原？就是返回到上一步的操作，那么前提是要能夠保存上一步的狀態(tài)，說到保存某一步的狀態(tài)，博主就知道怎么做了，需要一個全局變量Json，里面要有三個鍵值對，分別是當(dāng)前步驟的索引、左邊表格的數(shù)據(jù)、右邊表格的數(shù)據(jù)。似乎也不太難嘛，就此著手，開干。
2、代碼示例
2.1 cshtml頁面代碼

 
 
 @Styles.Render("~/Content/css")
 @Styles.Render("~/Content/table-css")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/knockout")
 @Scripts.Render("~/bundles/bootstrap")
 @Scripts.Render("~/bundles/bootstrap-table")
 @RenderSection("Scripts", false)


 @RenderBody()


 
@{
 ViewBag.Title = "訂單插單";
 Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/bundles/Order/InsertOrder")
@Styles.Render("~/bundles/Order/css")
@Scripts.Render("~/Content/bootstrap/datepicker/js")
@Styles.Render("~/Content/bootstrap/datepicker/css")

2.2 js代碼

我們重點(diǎn)來看幾個地方的代碼：
2.2.1 左邊表格加載成功之后執(zhí)行表格行的可拖拽。

在draggable的start事件中，我們將拖拽之前的左右表格中的數(shù)據(jù)全部保存到arrdata變量中，i_statuindex這個全局變量用于記錄當(dāng)前這一步的索引，用于撤銷操作。
2.2.2 右邊表格在加載成功之后注冊表格的droppable事件　　　　

在drop事件時，取到當(dāng)前拖過來的行數(shù)據(jù)，計算當(dāng)前鼠標(biāo)所在的位置，在右邊表格指定位置插入拖過來的行數(shù)據(jù)。然后刪除左邊表格拖過來的行數(shù)據(jù)。
2.2.3 撤銷操作代碼　　　

撤銷操作主要是通過全局變量arrdata里面的索引判斷撤銷到哪一步，然后根據(jù)索引取出當(dāng)前步驟的左右表格數(shù)據(jù)，依次向兩表格插入數(shù)據(jù)，然后i_statuindex依次遞減，直至等于零，由于左邊表格行數(shù)據(jù)全部重寫加載過，所以需要重新注冊可拖拽事件。就是這么簡單的三步就能實現(xiàn)想要的效果，是不是很簡單~~

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com