158 lines
No EOL
4.4 KiB
Text
158 lines
No EOL
4.4 KiB
Text
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
|
|
|
|
.. attribute:: nodes
|
|
|
|
dictionary of root nodes
|
|
|
|
.. attribute:: allnodes
|
|
|
|
dictionary of all nodes in the tree
|
|
|
|
.. method:: 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
|
|
|
|
.. method:: collapse_all()
|
|
|
|
Collapse all nodes
|
|
|
|
.. class:: TreeNode(tree, parent, id, imagesrc, onclick, onexpand, opts, label)
|
|
|
|
This class is instantiated by :meth:`Tree.addNode`
|
|
|
|
.. attribute:: parent
|
|
|
|
Parent node or the Tree (in case of root node)
|
|
|
|
.. attribute:: nodes
|
|
|
|
Dictionary of child nodes by id
|
|
|
|
.. attribute:: 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'}
|
|
}
|
|
|
|
.. method:: select()
|
|
|
|
Select the node
|
|
|
|
.. method:: deselect()
|
|
|
|
Deselect the node
|
|
|
|
.. method:: show_selected()
|
|
|
|
Show the style as selected
|
|
|
|
.. method:: setlabel(t)
|
|
|
|
Set the label of the node
|
|
|
|
.. method:: setcolor(c)
|
|
|
|
Set background color of the node
|
|
|
|
.. method:: 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);
|
|
}
|
|
}
|
|
|
|
|