ajax tree

[Met00]

Most people use the tree menus for menus. I need something better than that.

In this application a user will be defining a flow or path for an application. I want to allow them to build the various level components and then use multiple trees to move the components from one tree to another.

As an example we will use a school application where the user will create a training system which the application will walk them through. The system will consist of the following levels.

1) Topic area
2) Lessons
3) Examples

First the user will add examples to the system. Then they will create the lessons page. Finally they will create the topics pages.

Now I need a way to allow the user to associate the examples and the order that they want them presented to the user to the lessons. And then a way to associate the lessons to the topics.

A great visual method would be to have two trees at each level. They would enter the example-to-lesson page and select the lesson from the left tree and then select examples from the right tree and then either drag-and-drop the example UNDER the lesson or use a "move button" to move the example from it's tree to the lesson tree. It would also be nice if the user had the ability to move the example from one location to another within the left hand side of the tree.

When the user moves the item from the right hand tree to the left hand tree it sends the new parent id back to the server along with the items sequence number under that parent. If an item is moved in the left hand tree the server is updated with each move and re-indexed.

This tree-builder application will then be used again at the lesson-to-topic level to create the path from topics to lessons.

A final tree may look like:

topic1
- lesson1
-- example1
-- example2
-- example3
- lesson2
-- example4
-- example5
-- example6
-- example7
-- example8
-- example9
- lesson3
-- example10
-- example11
-- example12
- lesson4
-- example13
-- example14
topic2
- lesson5
-- example15
-- example16
-- example17
- lesson6
-- example18
-- example19
-- example20
-- example21
-- example22
-- example23
- lesson7
-- example24
-- example25

Thus when a user comes into the system they would start at topic1-Lesson1-Example1 and continue to transverse the tree until they get to topic2-lesson7-example25.

I have found any number of ajax trees that allow for you to dynamically build a user side menu from a tree structure stored in a database, but have yet to find anyone who has created a component that allows you to take a series of flat structures and dynamically build a tree from those components.

Any help locating a component that would be able to perform this type of action would be appreciated.

[Nile]

What would this be used for, it seems very complicating.

Edit: Looking at the post below, I get it. But I got nothing

[Met00]

What would this be used for, it seems very complicating.

I thought the example given was simple enough.

There is a path to be followed, for instance, learning history.

You start with the US Constitution, or the Declaration of Independence? Do you start with WW II or the Civil War?

So, you might have a tree on US History that is built like:

Early America
- Settlements
-- Mass.
-- Virginia
-- Rhode Island
-- Connecticut
-- Pennsylvania
-- Southern States
- British Rule
-- Laws and Regulations
Founding Documents
- The DoI
-- Purpose
-- Important clauses
-- Nature's God
-- Adams verse Jefferson
- Article of Confederation
-- Purpose
-- First references to United States of America
- The Constitution
-- The Preamble
-- Article 1
-- Article 2
-- Article 3
-- Bill Of Rights
-- Additional Amendments

In this case each of these may be linked to multiple pages of content, references, etc. But this is a path of learning. It makes little sense to discuss the Constitution before you cover the prior history and understand why there was a need for the US to break from British Rule and how they did it (the DoI) and then the initial document that established the concept of the 13 colonies becoming one unified country under a federal umbrella.

Now, there are a number of ways to build paths, but the ability to pull together all the information first, and then organize it into a stream allow you to see all the data as it's individual units and then bind them together in the presentation order. The presentation order is a tree (path) that goes from top to bottom, left to right.

The tool I have defined above allows the units to be bound together in a tree (by either drag-and-drop or selection between panels).

Again, think of an education application where you have many teachers/experts building course material and you will allow each "teacher" to build their teaching tree from a large selection of course material. A content Management System where a teacher can take the content and bundle it up into their teaching modules in the teaching path that they want.

This could be used in history, science, math, english, any subject area. Additionally, it could be used in corporate training as well.

Outside or training, this type of application would allow anyone to organize any data into a tree structure that allows them to tie a "sub-key" to a "key" and while my example uses three levels, there is no reason why it should be limited to that.

Think of it as a tree-builder that uses multiple "trees" to allow you to create a structered tree from unstructured data.

[tsiros]

by Met00
...I have found any number of ajax trees that allow for you to dynamically build a user side menu from a tree structure stored in a database, but have yet to find anyone who has created a component that allows you to take a series of flat structures and dynamically build a tree from those components.


i have just finished a script which build a tree from any query
Because the query can return huge data the tree load only what is needed as you click on nodes.

take a look at http://tsiros.freeo.net/query2tree