ZK Component Reference/Data/Tree

Tree

• Demonstration: Tree
• Java API: Tree
• JavaScript API: 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

<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>

<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