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.
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.
On the initial status, the tree control has no data. So you have to create the first node.
In order to add a node, click the "Add the root node" button. Then following dialog box appears.
In this dialog, input the root node's name and click the "Create Node" button. Then the root node is created.
After adding the root node, you can add some other node. Click the edit link next to the root node. Then following dialog appears.
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.
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.
By dragging the node to move, you can move the node to anywhere you like.
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.
The location of source code is in the "ALINOUS_HOME/samples/jqtree-db/" folder.
The main page is "index.html" in the "jqtree-db" folder.
The code of 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.
- Initialize the $tree object by calling tree() jQuery plugin
- Register the callback function on clicking the link having "edit" class
- Register the callback function on opening the tree node by calling bind() function
- Register the callback function on closing the tree node by calling bind() function
- Register the callback function on moving the tree node by calling bind() function
By those operations, the tree UI works like the demo.
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.
This event handler shows the dialog dynamically. The source code of the dialog is the "/samples/jqtree-db/dlg/editNode.html" file.
The status, that the tree node is opened or closed, is saved in the cookie of the browser.
This event handler defines the operation executed when the tree node is moved.