Nested Tree-view with Ajax

A nested tree-view listing where a user can open up sub-branches without reloading the entire page, but the page should only download the sub-branches as they are requested. This should be able to go infinite levels deep. This will function similar to the folder view in Windows Explorer, where users can open and close branches. The page will get it's information from a very simple database (1 table with 3 fields). ## Deliverables This tree-view page will function similarly to the Folder view in Windows Explorer. Firstly, it will use a simple database table with the following 3 fields: id INT(10) UNSIGNED PRIMARY KEY, parent INT(10) UNSIGNED, name VARCHAR(255) Example: 1, NULL, aaaaa 2, 1, bbbbb 3, 2, ccccc 4, 1, ddddd A starting ID should be defined as a constant at the top of the page and that will determine the starting point of the tree view. Example, if starting point is ID 2 from the above example table, then only bbbbb and ccccc should ever be displayed, and not allow access any higher in the tree. The page's default view at first loading should be to list the details of the starting ID, then under that, list the details of each child of that ID. The user should then be able to click on any of the names listed which will cause the page to load that name's child IDs from the server and display them under that name (indented). All child nodes should be indented under it's parent at least 20px or so. The user should also have the ability to hide child listings by clicking on the parent's name again. In the case where a section has been re-hidden by the user, then opening it again should cause a fresh re-load from the server for the child nodes, however this should be configurable so that it can be turned on/off in a define statement in the php. This page should cater for at least 100 child levels, preferably designed in such a way that it can go down infinite levels. When a section is opened (and it needs to load the data from the server), it should display some kind of 'loading' graphic (no words). Something like a grey spinning circle of dots. Each row listing should be 100% wide, regardless of it's position within the hierarchy so that some right-aligned links can be included in each row. I have attached an image of a tree-view that I like the look of. The project should use as little code and external libraries as possible.