Jump to content

Table drag 'n drop re-ordering


Mike Rockett
 Share

Recommended Posts

Greetings :)

I'm busy working on my first module (finally). Part of the module entails rendering the usual MarkupAdminDataTable on the module's admin page.

Because of the nature of the module, I'd like to be able to re-order items in the table, by means of drag 'n drop, and perhaps save that order as an order field in the DB table for each item.

Can't seem to find anyone who's done this before... Can anyone point me in the right direction?

Link to comment
Share on other sites

Hi Mike,

Off the top of my head:

http://modules.processwire.com/modules/batch-child-editor/ :)

And the 2.5 core PageTable fieldtype.

$table = $this->modules->get('MarkupAdminDataTable');
$table->setSortable(true);
function TableSortable($table) {
    if(!$table.is("tbody")) $table = $table.find("tbody");
    $table.sortable({
        axis: 'y',
        handle: '.InputfieldChildTableRowSortHandle'
    });
}
  • Like 1
Link to comment
Share on other sites

Thanks Adrian, works just the way I wanted. Though, it seems to resize the row once it's been picked up - makes it thinner. When you put it back, it goes back to normal...

Edit: Also, what event do I listen for in order to show a button (say, "Save New Order") when it is changed? (That is, not when the row is picked up, but when it's put down in a different place.)

Update (row width): 

I've managed to get it mostly right with this:

table tbody tr>td:first-child {
    width: 1%;
}
table tbody tr>td:nth-child(2) {
    width: 26%;
}
table tbody tr>td:nth-child(3) {
    width: 35%;
}
table tbody tr>td:nth-child(4) {
    width: 35%;
}
table tbody tr>td:last-child {
    width: 3%;
}
Edited by Mike Anthony
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...