jQuery jqTree plugin example
The jqTree is useful tree widget made as jQuery plugin. This example shows you how to use this jQuery plugin with the server side program.
This example is using jqTree jQuery plugin.
- Access and work the example
In order to access this example, please access the url below or "jQuery Autocomplete" link from the toppage.
Then the page below will appear.
You can expand the tree by clicking icon in the left of the node.
And, you can edit and sort the tree node by drag and drop.
This example shows you how to implement the Tree widget using ajax and server side program.
The source code is in the "ALINOUS_HOME/samples/jqtree/" folder.
The jqTree example's main Html is "index.html". The tree widgit is made in the div tag.
In this function, it calls $.getJSON(). The callback function on success get the JSon data and call tree() function. The tree() is jQuery plugin function of the jqTree.
The "/samples/jqtree/makejson.alns" get the JSon data, and the implementation is below.
This JSon data has "id" property. This is very important point if you want to write the responce of the event.
In order to prepare for click event, you have to bind call back function like below.
The jqTree supports drag and drop event, so by writing the callback function, you can make tree widget supporting drag and drop. The source code below in the "index.html" binds the callback function.
This code binds callback function for "tree.move" event. When the tree node moved, the node of UI changes automatically, but you should synchronize that with the server data.
This script get information how the tree was changed and call server side program with $.ajax().
When the tree node changes, the script "/samples/jqtree/servercallback.alns" is called. The source code is below.
When the scirpt is accessed. parameter is like below.
The jqTree has next parameters.
- modedNodeId - The id of the moved node
- position - relation between the moved node and target node
- previousPArentId - The id of node which was the parent of the moved node before it moved
- targetNodeId - The target after moved. The position descides the releavance with the moved node
The "position" parameter has 3 variation of value.
- "inside" is used when the moved node is the first child of targetNode, even if the targetNode has other children
- "before" is used when you chnage order of root node and the moved node is the first one
- "after" is used when the targetNode is elder brother
This example is testable code, there is more example to do testing automation. Please take a look at Testing jqTree example.