Main program and show data in tree structure

The main part of the tree structure handling demo is a web page using the jqTree. The data shown on the jqTree is fetched dynamically from the database by server side program.

Once you understand this component, you can use tree structured user interface anywhere.

Demo and appearance

In order to run the demo, create the Example project. This project includes this demo. After create the project and run it, access the top page. And then, select the "jqTree with Database" link.

launch the demo

Initial data

On the initial status, the tree control has no data. So you have to create the first node.

Initial status of the tree structure control.

Add the root node

In order to add a node, click the "Add the root node" button. Then following dialog box appears.

Add the root node dialog

In this dialog, input the root node's name and click the "Create Node" button. Then the root node is created.

Created root node on the tree control

Add some more nodes

After adding the root node, you can add some other node. Click the edit link next to the root node. Then following dialog appears.

Dialog to manipulate the node on the tree

At first, input the node name in the text area. And select the location to add. The location is from the selected node where the "edit" link is.

After select the location, click the "Create Node" button. By iterating this operation, you can build a tree data. The tree data is stored in the database, therefore once you close the we browser, and access this page after that, the tree you built remains.

Delete a node

You can delete the node with the same dialog. On the dialog box, click the "Delete this Node" button, then the selected node, which is the node you clicked the "Edit" link to show the dialog, and the child nodes are deleted.

Move the node

By dragging the node to move, you can move the node to anywhere you like.

Drag and Drop tree node and move it

You can drop the node and move it to the following location.

  • After the destination node
  • Before the destination node
  • Inside of the destination node

The tree control notify the dropped event, when the event occur, to the server side program by using ajax.

Source code location

The location of source code is in the "ALINOUS_HOME/samples/jqtree-db/" folder.

Tree structure demo's source code location

The main page is "index.html" in the "jqtree-db" folder.

Main html

The code of the main html is below.

This html has a div tag whose id is "tree1". This div tag become the tree UI after it is initialized by the Javascript.

Javascript part

The Javascript section in the main html is below.


In this program, it initialize the dialog at first. After that, call the $.getJSON() function and initialize the tree UI on the callback function on accepting the ajax result.

On the callback function, it does following operations.

  1. Initialize the $tree object by calling tree() jQuery plugin
  2. Register the callback function on clicking the link having "edit" class
  3. Register the callback function on opening the tree node by calling bind() function
  4. Register the callback function on closing the tree node by calling bind() function
  5. Register the callback function on moving the tree node by calling bind() function

By those operations, the tree UI works like the demo.

Callback operations

In the Javascript section of the main Html, the Javascript program does following operation.

Initialize the Tree UI

The Javascript program initialize the tree UI and register callback function. The code is below.

This program access the path "/samples/jqtree-db/makejson.alns", and initialize the jqTree at the callback function.

On initializing the jqTree Object, it defines onCreateLi function. The function hook creating node element, and add edit link next to the node element.

In the callback function it initialize event handlers.

Show dialog after clicking link having "edit" class

The onCreateLi function create the link which has "edit" class. This Javascript code defines the event handler on the link is clicked.

This event handler shows the dialog dynamically. The source code of the dialog is the "/samples/jqtree-db/dlg/editNode.html" file.

Open and Close the tree

The status, that the tree node is opened or closed, is saved in the cookie of the browser.

This event handler save the state in the cookie when the status of the node is changed. The source code of the JqTreeLazyState is at the "/samples/jqtree-db/jqcookiestate.js" Javascript file.

Moving the tree node by drag and drop

This event handler defines the operation executed when the tree node is moved.


The Tree UI is updated by the jqTree Javascript library, so we have to notify that the move event occurred to the server side program.


Go to Top