Drag and Drop reordering of Table records

Tips submitted by PHPMaker users
Post Reply
kirondedshem
User
Posts: 642

Drag and Drop reordering of Table records

Post by kirondedshem »

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.

  1. 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.

  2. 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>

  3. 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)

  4. 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.

  5. 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
})

  1. As long as you have included the right library files all records in the list should now be sortable by drag and drop.

NOTEs

  1. 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.
  2. If you want it to be applied into whole project just transfer the code to global startup script

netenken1
User
Posts: 64

Post by netenken1 »

yeh, nice job, give you a star first, I'll try this night , and feedback to everybody. But I think we still need a server side ajax to writeback the sort value to the sortable table while drap event raised...


kirondedshem
User
Posts: 642

Post by kirondedshem »

Currently I just wanted to prove a point, but i feel an addition of this nature is necessary for full functionality, but it requires alot more work like:

  1. add a record_position int(11) field to every table, which will keep the current order number of the record in relation to others. You can default it to the record number of a new record during add event of a new record. With this you can even use phpmaker sort table setting to always order them according to the current order of thier record_position. Although I feel this will be meaningless since most users might even want to sort using all other table fields the ways it is by default in phpmaker so limiting them to only this column is very hard to come by as a requirement.

  2. Then find a way to determine the new position of a dargged and droped record using java-script and do an ajax call passing the table_name,record_id and position such that it can save the new record_position into the database. This requires you to study the library so you can know how to use thier custom event handlers to achieve this.


Post Reply