Table Of Contents

Previous topic

Listing

Next topic

Tabbed Page

This Page

Tree

Tree widget renders a hierarchical tree where child nodes can be queried on demand. It can be useful to show folder like structures, hierarchical menus etc.

Tree & TreeNode Classes

class Tree(parent, width, do_animate)

Creates a new tree widget in the parent. if do_animate is set, it will animate the expansion and closing of the tree

nodes
dictionary of root nodes
allnodes
dictionary of all nodes in the tree
addNode(parent, id, imagesrc, onclick, onexpand, opts, label)

create a new TreeNode

  • parent - parent TreeNode which the node is to be created. null for root node
  • id - label (if not separately specified) of the new node
  • imagesrc - icon of the node
  • onclick - event to be called when node is clicked (selected)
  • onexpand - event to ba called when node is expanded
  • opts - node style options
  • label - if label is separate from id
collapse_all()
Collapse all nodes
class TreeNode(tree, parent, id, imagesrc, onclick, onexpand, opts, label)

This class is instantiated by Tree.addNode()

parent
Parent node or the Tree (in case of root node)
nodes
Dictionary of child nodes by id
opts

Style of the node. Default opts is:

opts = {
   show_exp_img:1
   ,show_icon:1
   ,label_style:{padding:'2px', cursor: 'pointer', fontSize:'11px'}
   ,onselect_style:{fontWeight: 'bold'}
   ,ondeselect_style:{fontWeight: 'normal'}
}
select()
Select the node
deselect()
Deselect the node
show_selected()
Show the style as selected
setlabel(t)
Set the label of the node
setcolor(c)
Set background color of the node
clear_child_nodes()
Remove all child nodes

Example

Example showing a tree in which the child nodes are queried from the server onexpand:

// Tree
// ----------

pscript.load_cat_tree = function(){
//create category tree
  if(!pscript.cat_tree){
    pscript.make_cat_tree();
  }
  pscript.get_parent_category();
}

pscript.get_parent_category = function(){
  if (pscript.cat_tree){
    pscript.cat_tree.innerHTML = '';
  }
  var callback1 = function(r,rt){
    cl = r.message;
    var has_children = true; var imgsrc = 'images/icons/page.gif';
    for(i=0; i<cl.length;i++){
      var n = pscript.cat_tree.addNode(null, cl[i][1],imgsrc, pscript.cat_tree.std_onclick, has_children ? pscript.cat_tree.std_onexp : null, null, cl[i][0]);
      n.rec = cl[i]; n.rec.name = cl[i][0]; n.rec.label = cl[i][1];
      n.rec.parent_category = '';
    }
  }
  $c_obj('Ticket Control','get_root_category','',callback1);
}

pscript.make_cat_tree = function() {
   var tree = new Tree(pscript.faq_cat_tree, '100%');
   pscript.cat_tree = tree;

   // on click
   pscript.cat_tree.std_onclick = function(node) {
      pscript.cur_node = node;
      pscript.cur_node_val = node.rec.name;
      //make faq list
        pscript.make_faq_lst('frm_node');
   }

   // on expand
   pscript.cat_tree.std_onexp = function(node) {

      if(node.expanded_once)return;
      $ds(node.loading_div);

      var callback = function(r,rt) {
         $dh(node.loading_div);
         var n = pscript.cat_tree.allnodes[r.message.parent_category];
         var cl = r.message.category;

         for(var i=0;i<cl.length;i++) {
            var imgsrc='images/icons/page.gif';
            var has_children = true;
            var t = pscript.cat_tree.addNode(n, cl[i].name, imgsrc, pscript.cat_tree.std_onclick, has_children ? pscript.cat_tree.std_onexp : null, null, cl[i].category_name);
            t.rec = cl[i];
            t.rec.name = cl[i].name;
            t.rec.label = cl[i].category_name;
            t.parent_category = r.message.parent_category; //alert(t)
         }
      }
      var arg = {}
      arg['category'] = node.rec.name;
      $c_obj('Ticket Control','get_categories',docstring(arg),callback);
   }
}