I have a tree representation of pages in a CMS application. I understand how to persist the tree in the database. However, I don't have a good way to:

A) Reorder subpages under a particular parent page.
B) Provide a UI implementation that allows the user to change the order.

Any suggestions?


A) I have a similar CMS app and I store an ordinal value with the page for a particular tree and sort on this value -- because lots of my pages appear in completely different sites I have to maintain the ordinal number against a page / tree combination.

B) I too would like a better way to do this. Currently they click on the node in the treeview and in the main page screen they can move the page around. I've tried drag and drop with java script and other solutions but my users could never work with it without lots of hand holding. I'll be interested in the responses to this one.

Phil Bennett

Changing the order itself will require you store some sort of ordering along with each page in the database. Just the current highest / lowest value +/- 1 would probably be a fine starting point. Once you've got that ordering in there, reordering becomes a case of swapping two values or changing the value for one page to be between two others (you could use floats I guess, but you may need to renumber if you split it too many times).

Anyway, once you've got that, you need a UI. I've seen a very simple 'swap this with the one above/below' approach which can be a simple web link or an AJAX call. You could also present all the page values to the user and ask them to renumber them as they see fit. If you want to get fancy, JavaScript drag and drop might be a good approach. I've used ExtJS and Mootools as frameworks in this kind of area. If you don't need all the Extjs widgets, I'd say well away from it in future, and look at something like the Mootools Dynamic Sortables demo.

Matt Sheppard