當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS组件系列——Bootstrap Table 表格行拖拽

發(fā)布時(shí)間：2025/3/15 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS组件系列——Bootstrap Table 表格行拖拽小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

JS組件系列——Bootstrap Table 表格行拖拽原文:JS組件系列——Bootstrap Table 表格行拖拽

前言：之前一直在研究DDD相關(guān)知識(shí)，好久沒更新JS系列文章了。這兩天做了一個(gè)簡單的業(yè)務(wù)需求，覺得效果還可以，今天在這里分享給大家，歡迎拍磚~~

一、業(yè)務(wù)需求及實(shí)現(xiàn)效果

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

1、先看看拖動(dòng)之前的效果

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

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

4、第二次、第三次拖動(dòng)完成后效果

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

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

二、代碼示例

初初接到需求，博主的第一感覺是應(yīng)該上Bootstrap table api里面找一下，畢竟開源的力量是強(qiáng)大的，或許有相關(guān)的示例呢。經(jīng)過一番查找，很可惜，Bootstrap Table沒有這種兩張表格之間的操作。想想其實(shí)也可以理解，Bootstrap Table是針對某個(gè)動(dòng)態(tài)表格數(shù)據(jù)綁定的，它的側(cè)重點(diǎn)是表格內(nèi)部的功能，比如表格內(nèi)部行的拖拽排序(Reorder Rows)有很好的解決方案，對于像博主這樣的特殊需求，似乎也應(yīng)該自己去實(shí)現(xiàn)。

1、需求分析

既然決定自己去寫，博主開始分析需求，似乎這個(gè)操作里面比較困難的是拖拽效果，說到拖拽效果，原來使用JsPlumb的時(shí)候那使用太多了，于是就想到了我們神奇的JQuery UI里面的draggable.js 和droppable.js。拖拽的問題解決了，那么還有一個(gè)難點(diǎn)，就是撤銷操作怎么辦？我們知道Ctrl+z的意思是還原，什么叫還原？就是返回到上一步的操作，那么前提是要能夠保存上一步的狀態(tài)，說到保存某一步的狀態(tài)，博主就知道怎么做了，需要一個(gè)全局變量Json，里面要有三個(gè)鍵值對，分別是當(dāng)前步驟的索引、左邊表格的數(shù)據(jù)、右邊表格的數(shù)據(jù)。似乎也不太難嘛，博主就此著手，開干。

2、代碼示例

?2.1 cshtml頁面代碼

<html> <head><meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title>@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) </head> <body>@RenderBody() </body> </html> 母版_layout.cshtml @{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")<script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script><div class="panel-body" style="padding-bottom:0px;"><div class="panel panel-default" style="margin-bottom:0px;"><div class="panel-heading">查詢條件</div><div class="panel-body container-fluid"><div class="row"><div class="col-md-3"><label for="txt_search_ordernumber" class="col-sm-4 control-label" style="margin-top:6px;">訂單號(hào)</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_ordernumber"></span></div><div class="col-md-3"><label for="txt_search_bodynumber" class="col-sm-3 control-label" style="margin-top:6px;">車身號(hào)</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_bodynumber"></span></div><div class="col-md-3"><label for="txt_search_vinnumber" class="col-sm-4 control-label" style="margin-top:6px;">VIN碼</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_vinnumber"></span></div><div class="col-md-3"><label for="txt_search_engin_code" class="col-sm-4 control-label" style="margin-top:6px;">發(fā)動(dòng)機(jī)號(hào)</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_engin_code"></span></div></div><div class="collapse" id="div_more_search"><div class="row" style="margin-top:15px;"><div class="col-md-3"><label for="txt_search_import_startdate" class="col-sm-4 control-label" style="margin-top:6px;">導(dǎo)入時(shí)間</label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_import_startdate"></span></div><div class="col-md-3"><label for="txt_search_import_enddate" class="col-sm-3 control-label" style="margin-top:6px;">至</label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_import_enddate"></span></div><div class="col-md-3"><label for="txt_search_send_startdate" class="col-sm-4 control-label" style="margin-top:6px;">下發(fā)時(shí)間</label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_send_startdate"></span></div><div class="col-md-3"><label for="txt_search_send_enddate" class="col-sm-4 control-label" style="margin-top:6px;">至</label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_send_enddate"></span></div></div><div class="row" style="margin-top:15px;"><div class="col-md-3"><label for="txt_search_carcode" class="col-sm-4 control-label" style="margin-top:6px;">整車編碼</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_carcode"></span></div><div class="col-md-3"><label for="txt_search_vms" class="col-sm-3 control-label" style="margin-top:6px;">VMS號(hào)</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_vms"></span></div><div class="col-md-3"><label for="txt_search_trans_code" class="col-sm-4 control-label" style="margin-top:6px;">變速箱號(hào)</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_trans_code"></span></div></div></div><div class="row" style="float:right;margin-right:50px;margin-top:13px;"><div><button type="button" id="btn_query" class="btn btn-primary" style="margin-right:20px;width:100px;">查詢</button><button type="submit" id="btn_reset" class="btn btn-default" style="margin-right:20px;width:100px;">重置</button></div></div></div></div><div class="collapse_div_outside"><div class="collapse_div_inside"></div><span id="span_collapse" href="#div_more_search" class="collapse_div_inside_ele">展開<label class="glyphicon glyphicon-menu-down"></label></span></div> </div>@*<div id="toolbar_left" class="btn-group"> </div>*@ <div id="toolbar_right" class="btn-group"><button id="btn_cancel" type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward aria-hidden="true"></span>撤銷</button><button id="btn_insertorder" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>插單</button> </div> <div class="panel-body" style="padding-top:0px;"><div id="div_tableleft" class="col-md-6"><table id="tb_order_left"></table></div><div id="div_tableright" class="col-md-6"><table id="tb_order_right"></table></div> </div> 訂單插單頁面.cshtml

?2.2 js代碼

?我們重點(diǎn)來看幾個(gè)地方的代碼：

2.2.1 ?左邊表格加載成功之后執(zhí)行表格行的可拖拽。

$('#tb_order_left tr').draggable({helper: "clone",start: function (event, ui) {var old_left_data = JSON.stringify($('#tb_order_left').bootstrapTable("getData"));var old_right_data = JSON.stringify($('#tb_order_right').bootstrapTable("getData"));var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data };arrdata.push(odata);},stop: function (event, ui) { }});

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

2.2.2 右邊表格在加載成功之后注冊表格的droppable事件

　　　　$("#tb_order_right").droppable({drop: function (event, ui) {var arrtd = $(ui.helper[0]).find("td");var rowdata = {ORDER_NO: $(arrtd[1]).text(),BODY_NO: $(arrtd[2]).text(),VIN: $(arrtd[3]).text(),TM_MODEL_MATERIAL_ID: $(arrtd[4]).text(),ORDER_TYPE: $(arrtd[5]).text(),ORDER_STATUS: $(arrtd[6]).text(),CREATE_DATE: $(arrtd[7]).text() == "-" ? null : $(arrtd[7]).text(),PLAN_DATE: $(arrtd[8]).text() == "-" ? null : $(arrtd[8]).text(),VMS_NO: $(arrtd[9]).text(),ENGIN_CODE: $(arrtd[10]).text(),TRANS_CODE: $(arrtd[11]).text(),OFFLINE_DATE_ACT: $(arrtd[12]).text() == "-" ? null : $(arrtd[12]).text(),HOLD_RES: $(arrtd[13]).text(),SPC_FLAG: $(arrtd[14]).text(),TO_ORDER_ID: $(ui.helper[0]).attr("data-uniqueid")};var oTop = ui.helper[0].offsetTop;var iRowHeadHeight = 40;var iRowHeight = 37;var rowIndex = 0;if (oTop <= iRowHeadHeight + iRowHeight / 2) {rowIndex = 0;}else {rowIndex = Math.ceil((oTop - iRowHeadHeight) / iRowHeight);}$("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex, row: rowdata });$('#tb_order_left').bootstrapTable("removeByUniqueId", $(ui.helper[0]).attr("data-uniqueid"));oTableInit.InitDrag();}});

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

2.2.3 撤銷操作代碼

　　　　 //撤銷操作點(diǎn)擊事件$("#btn_cancel").click(function () {if (i_statuindex <= 0) {return;}for (var i = 0; i < arrdata.length; i++) {if (arrdata[i].index != i_statuindex) {continue;}var arr_left_data = eval(arrdata[i].left_data);var arr_right_data = eval(arrdata[i].right_data);$('#tb_order_left').bootstrapTable('removeAll');$('#tb_order_right').bootstrapTable('removeAll');$('#tb_order_left').bootstrapTable('append', arr_left_data);for (var x = 0; x < arr_right_data.length; x++) {$("#tb_order_right").bootstrapTable("insertRow", { index: x, row: arr_right_data[x] });}//$('#tb_order_right').bootstrapTable('append', arr_right_data);//append之后不能dropbreak;}i_statuindex--;//重寫注冊可拖拽 m_oTable.InitDrag(); });

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

posted on 2015-12-07 08:20 NET未來之路閱讀(...) 評論(...) 編輯收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/5025049.html

總結(jié)

以上是生活随笔為你收集整理的JS组件系列——Bootstrap Table 表格行拖拽的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： LeetCode Solutions :
下一篇： BroadcastReceiver 广播