Making HTML Table sortable and selectable
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.
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.
Jquery has some nice table features. I'm sure you'll find something you need over there. Just jquery.com or google it.
精彩评论