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.

http://localhost:8080/samples/autocomplete/

Then the page below will appear.

jqTree controll

You can expand the tree by clicking icon in the left of the node.

expand jqtree

And, you can edit and sort the tree node by drag and drop.

jqtree drag and drop

top of this page

Implementation

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.

jqTree example source folder

top of this page

Included jQuery files

In this example, included css and JavaScript file is below.

top of this page

Create tree control

The jqTree example's main Html is "index.html". The tree widgit is made in the div tag.

In this case, the div tag whose id is "tree1" is there. Next, call jqtree plugin function and make jqTree control. The code below is JavaScript code which is in the header part of the "index.html".

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.

top of this page

JSon data

The "/samples/jqtree/makejson.alns" get the JSon data, and the implementation is below.

This example is simply making Json data. If you want to make JSon data from database record, please take a look at jQuery Autocomplete example. This example also use Record.dom2json().

This JSon data has "id" property. This is very important point if you want to write the responce of the event.

top of this page

Click callback

In order to prepare for click event, you have to bind call back function like below.

The "event" has property named "name" and "id". The properties has value of "label" and "id" field of JSon you made. By using this id, you can specify the node in JavaScript and Server side program.

jqtree nodes's label and id

top of this page

Drag and Drop support

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().

top of this page

Server side program

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

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing jqTree example.


Go to Top