Making HTML Table sortable and selectable

Question

I have a very specific requirement for a Prototype based JS / HTML script (or something that doesn't interfere with Prototype) that can add the following functionality to a normal, multi-column HTML table:

• Re-order rows using drag and drop and send changes to a Javascript handler function (not a "sortable table" function to order by fields, but a manual re-ordering of individual rows)

• The re-ordering feature can be disabled/enabled using a Javascript command, when it is turned off, the rows can not be moved

• Select one or multiple rows using Ctrl and shift keys + click, send current selection to JS handler function on each change

Maybe somebody knows something like this and can save me a lot of time searching through the Interwebs or programming it myself. If I find anything, I'll post it here.

Answer 1

Jquery has some nice table features. I'm sure you'll find something you need over there. Just jquery.com or google it.

Answer 2

Scriptaculous's Sortables could work for you, but it's worth noting that sortables does not work on tables outside of Firefox.

To enable/disable sorting by javascript, use the create/destroy functions. You can also use the onUpdate callback to serialize the sortable and send it off to some url for processing.

// Enable sorting.
sortable.create( 'some-table-id', {tag: 'tr', onUpdate: your_callback_function} )

// Disable sorting.
sortable.destroy( 'some-table-id' )

I doubt this enable you to do the multi-select you're looking for, but it should get you most of the way.

• Scriptaculous home page
• Sortable documentation
• Sortable.create documentation, including information about how the onUpdate callback works.