HTML table
elements are used to represent tabular data in an optimized way. Different data elements are organized in rows and columns, presented on the page. In this article, we will demonstrate how to use the Shield UI Draggable component for changing the order of table rows by dragging them with the mouse.
The default behavior of HTML tables can be enhanced by adding various customizations like styling, buttons and handling specific events. Examples of that are the Bootstrap table CSS and the Shield UI Grid, which can be used to develop complex user interface scenarios.
The example below shows how you can add row reordering to the HTML table
element styled with Bootstrap, which is general and can be applied to all table widgets like Shield UI's and others.
Requirements and Dependencies
Our example will use the jQuery, Shield UI and Bootstrap libraries. Hence you need to include the following resources in your HTML head
section:
The HTML Markup
To represent our data, we add a standard HTML table
element and an "Add Row" button to the page body. The button will be used to add new rows to the table:
Title | |||
---|---|---|---|
1. | Cormen, Leiserson, Rivest, Introduction to Algorithms | ||
2. | Weiss, Data Structures and Problem Solving Using C++ | ||
3. | Friedman, Koffman, Problem Solving, Abstraction and Design Using C++ |
HTML Styles
To make the table more visually attractive and improve the drag/drop experience, we add the following styles
section to the head
:
The JavaScript
The final piece is the JavaScript code that connects the HTML table
with the Shield UI Draggable component. All the functions below are added to the same jQuery closure having the form:
First we will add the function that will be called to handle changes in the row order - i.e. on events like dragging, inserting new rows and deletion of rows:
var onAfterReordering = function() { // here we just fix the numbers shown for each row // in reality, one can store the order information as an attribute of the row, // or using jQuery.data on the row object, etc // this can be used to determine how the order has changed after dragging finishes $("#myTable tbody tr").each(function(index, row) { $($(row).find("td").get(1)).html((index + 1) + "."); }); };
The most important part is the code that initializes dragging for each row from our table. Below is the definition of the function that does this for a single row:
var initRowReordering = function(row) { $(row).css("cursor", "move"); $(row).shieldDraggable({ helper: function (params) { // the draggable helper is the element used as a preview of the element being dragged // it can be a copy, or the actual element // here we create a copy of the dragged row and add it in a table, // so that the styles can be applied var helper = $('
Last, we will add the code that will initialize the row reordering for each row, add the event handlers for the Delete buttons on each row, and the code that gets executed when the "Add Row" button is clicked:
// initializes the row reordering for each row $("#myTable tbody tr").each(function () { initRowReordering($(this)); }); // clicking the Delete button should delete the row and resync ordering information $("#myTable tbody tr button.btn-danger").click(function() { $(this).closest('tr').remove(); onAfterReordering(); }); // adding a new row initializes reordering for it, as well as refreshes the ordering information $("#myAddButton").click(function() { var title = prompt("Enter new title: "); if (title) { var row = $('' + ' ').appendTo($("#myTable tbody")); initRowReordering(row); onAfterReordering(); } });' + ' ' + ' ' + title + ' ' + '' + '
The complete code can be seen on this page.
Related Articles
Blog Categories
-
General
-
Showcase
-
Technical
-
White Papers