Loading ...

Apps and development tools - jQuery Plugins

Tree

This plugin generates a tree structure. Tree data can either been defined locally (as part of the design) or remote via JSON data.

Includes

Static include:

<tml:include designdb="@afw" ref="include:jquery" o_jquery-plugins="tree"/>

Dynamic Include:

requirejs(["jquery-tree"], function(){...})

HTML

<div id="myTree"></div>

Usage

$("#myTree").wga_tree(options)

Parameter "options" is optional. Valid properties are

  • url: specify the url to read JSON data as "node-data array" from
  • data: specify locally defined tree structure as "node-data array" (see below)
  • path: path to a tree entry to select on load (requires OpenWGA 7.6.3 or later)

Data attributes

Parameter "url" can also be specified via data-url attribute:

<div id="myTree" data-url="http://my-server.com/my-data.json"></div>

Tree commands

In addition to the above usage the plugins supports commands sent to the tree using the folloging method:

$("#myTree").wga_tree(<command-string>[,<command-parameters>])

The following commands are valid:

  • expandnode, parameter DOM-node-element[, callback]
  • collapsenode, parameter DOM-node-element[, callback]
  • selectnode, parameter DOM-node-element
  • selectpath, parameter node-path (ids seperated by "/" like in "id1/id2/id3")
  • reload, parameter (optional) reload-config object (properties "url" and "selectpath")
  • addnode, parameter: parent node plus data object to be added
  • updatenode, parameter: parent node plus data object to be set
  • removenode, parameter node to be removed

Events

  • select: is fired when a tree entry is selected. The event handler is called with a JavaScript object specifying the selected node.

Sample:

$("#myTreee").on("select", function(event, node){

  console.log("tree node selected", node)

}).wga_tree()

Parameter "node" is a JavaScript object with the following properties:

  • node: selected HTML <li> element (DOM Element)
  • id: the id property of the selected node
  • level: the level of the selected node
  • title: the title of the selected node
  • haschildren: specifies if the node has children (Boolean)

Some of these properties may be undefined depending on the data of the tree structure.

Tree Node Data

The data used to render a single tree node is the same when initialized locally (via option.data) as expected from the remote JSON url:

{

  id: "<some unique id>",

  title: "<the title of the tree node>",

  iconurl: "<optional url for an icon to be rendered>",

  cssclass: "<optional css class to be added to the node>",

  children: [<optional array of child nodes>],

  haschilden: true|false    // specifies if an expand-icon will be displayed.

}

Except property "title" all properties are optional. However in most cases you want to specify property "id" to identify a selected node.

Property "haschildren" is ignored if a "children" array is specified. In this case children.length is calculated to display expand-icons if needed.

Remote data usually don't have a "children" property and specifies "haschildren" instead. Child nodes will then be loaded and added when a node is expanded.

Both the local options.data as well as the remote data have to be specified as an array of such node data objects:

$("#mytree").wga_tree({

  data:[
    <node_1>,

    <node_2>,

    ...

    <node_n>
  ]


})

Remote Data

When using remote tree data the specified JSON url is called with url parameter "id". The value of this parameter is either the id of the node that will be expanded and needs data or "root" if no id has been specified on the node.