Tree

From Documentation

Tree

Employment/Purpose

A tree consists of tree parts, the set of columns, the set of footers, and the tree body. The set of columns is defined by a number of treecol components, one for each column. Each column will appear as a header at the top of the tree. The second part, The set of footers is defined by a number of treefooter components, one for each column also. Each column will appear as a footer at the bottom of the tree. The third part, the tree body, contains the data to appear in the tree and is created with a treechildren component.

Example

File:ZKComRef Tree.PNG

<window title="tree demo" border="normal">
     <tree id="tree" width="400px" rows="5">
         <treecols sizable="true">
             <treecol label="Name"/>
             <treecol label="Description"/>
         </treecols>
         <treechildren>
             <treeitem>
                 <treerow>
                     <treecell label="Item 1"/>
                     <treecell label="Item 1 description"/>
                 </treerow>
             </treeitem>
             <treeitem>
                 <treerow>
                     <treecell label="Item 2"/>
                     <treecell label="Item 2 description"/>
                 </treerow>
                 <treechildren>
                     <treeitem>
                         <treerow>
                             <treecell label="Item 2.1"/>
                         </treerow>
                     </treeitem>
                     <treeitem>
                         <treerow>
                             <treecell label="Item 2.2"/>
                             <treecell label="Item 2.2 is something who cares"/>
                         </treerow>
                     </treeitem>
                 </treechildren>
             </treeitem>
             <treeitem label="Item 3"/>
         </treechildren>
         <treefoot>
             <treefooter label="Count"/>
             <treefooter label="Summary"/>
         </treefoot>
     </tree>
 </window>

Tree onAfterRender.png

<zk>
	<zscript><![CDATA[
	SimpleTreeModel stm = new SimpleTreeModel(new SimpleTreeNode("ROOT",
		Arrays.asList(new SimpleTreeNode[]{
				new SimpleTreeNode("David",new ArrayList()), 
				new SimpleTreeNode("Thomas",new ArrayList()),
				new SimpleTreeNode("Steven",new ArrayList())})));
	]]></zscript>
	
	<tree width="300px" model="${stm}" onAfterRender="self.setSelectedItem(self.getTreechildren().getLastChild())"/>
</zk>

Supported events

Name
Event Type
onSelect
SelectEvent

Description:

Denotes user has selected one or multiple child components(a set of treeitem).

onAfterRender
onAfterRender

Description: Notifies one that the model's data has been rendered.

Supported Children

* Treecols,  Treechildren,  Treefoot

Use cases

Version Description Example Location
3.6 Smalltalk: Building a Complex Tree with Grid-in-Grid http://docs.zkoss.org/wiki/Building_a_Complex_Tree_with_Grid-in-Grid
3.6 Open treeitem at start http://docs.zkoss.org/wiki/ZK/How-Tos/Concepts-and-Tricks#Open_treeitem_at_start
3.6 Expand all items of a Tree at start http://www.zkoss.org/forum/listComment/9379

Version History

Version Date Content
5.0.2 May 2010 Support the autopaging
5.0.4 July 2010 Support onAfterRender event



Last Update : 2010/10/06

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.