I saw this request in general discussion viewtopic.php?f=4&t=38954 and thought it might benefit others so I created a topic for it.
The goal here is to be able to drag and drop table rows as they reorder them selves.
I got a bit interested so I googled and landed on a library called "HTML5 Sortable" at url = github.com/lukasoppermann/html5sortable. They have an example in thier docs of a sortable table at the botttom.
It just takes like 5 lines of code but I thought I should elaborate more for those who are still looking for it.
I download the "html5sortable-master" zib from the githib link and put the whole extracted folder in a new folder called "custom_library" in my root web app folder.
I use page_head to include the library, go to page_head and paste this.
<link rel="custom_library/html5sortable-master/docs/stylesheet" href="basscss.css">
<script src="custom_library/html5sortable-master/docs/html.sortable.min.js"></script>Check that after regenerating all files the above path is correct otherwise change it to locate these files correctly(when you load any page you should not see console log errors of failed to load these files)
After the library is loaded, looking at thier example of sorted table you can see
-they set some classes "js-sortable-table" on the tbody tag of the table
-they set some class "border bg-white navy p4 js-sortable-tr" on all the tr tags of all the rows in a table
-they start the sortable table library after.To do the above in 4. Go to table->client scripts->startup script-list page and paste the following.
// Write your table-specific startup script here
// document.write("page loaded");
//find the desired table and add the class to tbody
$("table").find("tbody").addClass("js-sortable-table");
//find the desired table and add the class to tr tags of all rows
$("table").find("tbody").find("tr").addClass("border bg-white navy p4 js-sortable-tr");
//start the library
sortable('.js-sortable-table', {
items: "tr.js-sortable-tr",
placeholder: "<tr><td colspan=\"3\"><span class=\"center\">The row will appear here</span></tr>",
forcePlaceholderSize: false
})
- As long as you have included the right library files all records in the list should now be sortable by drag and drop.
NOTEs
- You can use your own jQuery selector to specific it for only a given table or even use your own library or even other better libraries.
- If you want it to be applied into whole project just transfer the code to global startup script