Implementation Code of the JS component BootstrapTable table row dragging Effect

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.

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 ")