Ajax photo gallery - JavaScript tree

Introduction.

I'm beginning series of articles where step by step describe ajax photo gallery developing process. This gallery I have created for one of my projects.

Task

Develop ajax gallery with not limited nesting in categories. Categories should support localization (in my case English and Russian ) Should be administrative panel. Everything what possible implement with help of Ajax.

Start developing

At the beginning of process I get html template of gallery. Not ideal, but everything clear with concept.

template

Basic idea of tree Html and CSS I got from here . But that tree can have only one nested level and doesn't work in IE.

So it seems to be first task.

Implementing the tree

I'm thinking about using tree from ext.js library library. But I decided to use prototype.js instead of heavy ext.js.
Task: Create tree with not limited nesting. Should allow add, edit and delete nodes.

Task is clear. First what I want to do, add IE support to and not limited nesting to the tree. Do this using plain Html and CSS. Dynamic generation will be little bit later.

As result I got such tree. As can maybe seen from picture pervious looking is slightly different. template

This picture created from such Html:

The next task to create with help of JavaScript the same Html.

On input should be pulled data. Data format is obvious.

JSON it's best JS can get!

With help of favorite text editor create test JSON data. With help of this data the tree of categories will be displayed.

So let's do tree rendering.

Render the tree.

Task: with help of JavaScript render tree. On input pull JSON on output will be DOM Html.

Object structure is pretty simple, tree class, and node class:

Tree - keeps nodes, rendering, etc.

TreeNode - implementation of node logic.

Useful methods: delete selected node (deleteSelectedNode), append node(appendNode), adding node to child collection of selected node. (appendNodeToSelected).

All code of node is not showed here because there is a lot of code (all listing will be available in attach). The node class implements editing methods:

Delete code:

Conclusion

First task completed. The tree is good looking in IE and FF; allows add, delete and edit nodes; implements simple API.

Example of tree, here.

Download here.

In the next part of serie I will implement server side, which will display the tree from database.

Russian version of article

Comments

You can use simple HTML-formatting tags(like <b>, <ul>, <code> and others)