JS component BootstrapTable table row dragging effect implementation code _ javascript skills

This article shares the code for using the JS component BootstrapTable table to drag and drop table rows. For more information, see I. business requirements and implementation results

The project involved the order module. On that day, I suddenly received a request, saying that the ticket insertion effect should be achieved between two orders in different States. The presentation method on the page is: two tables on the left and right, in the left Table, there are orders in the state of 1, and in the right Table, there are orders in the state of 2. The row data in the left Table is dragged to the specified row position in the right Table. After the row is dragged, delete one row from the left table and add one row to the right table. In addition, you also need to cancel the operation (equivalent to the Ctrl + Z operation) to return to the status of the previous step. The description may allow everyone to simulate pipeline. It has been implemented. Let's take a look.

1. first look at the effect before dragging

2. This is the result of dragging the row data in the left table.

3. The effect of table data after a row is dragged

4. effect after the second and third dragging

5. Click undo on the right table

6. Click undo multiple times and the table returns to the initial state.

Ii. Sample Code
The first thing you need to do is look at the Bootstrap table api. After all, the open source is powerful, and there may be examples. After some searching, it is a pity that Bootstrap Table does not perform operations between these two tables. You can also understand that Bootstrap Table is bound to data in a dynamic Table. It focuses on the internal functions of the Table, such as Reorder Rows) there are good solutions, and special requirements such as bloggers should also be implemented by themselves.
1. Requirement Analysis
Since I decided to write and start to analyze the requirements, it seems that the drag-and-drop effect is quite difficult in this operation. When talking about the drag-and-drop effect, I used too much of JsPlumb, so we thought of draggable in our magical JQuery UI. js and droppable. js. After the drag-and-drop problem is solved, Another difficulty is to cancel the operation. How can this problem be solved? We know that Ctrl + z refers to restoration. What is restoration? The operation is returned to the previous step, so the premise is to be able to save the status of the previous step. When it comes to saving the status of a step, the blogger knows how to do it and needs a global variable Json, there must be three key-value pairs: The index of the current step, the data in the left table, and the data in the right table. It seems that it is not very difficult to start.
2. Sample Code
2.1 cshtml Page code

 
  @ ViewBag. 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)@ RenderBody ()@ {ViewBag. Title = "order ticket insertion"; 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 ")