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.

Autopaging

When using the paging mold and vflex, you could also turn on autopaging (Tree.setAutopaging(boolean)) such that the page size will be adjusted automatically based on the available space.

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>

Supported events

Name	Event Type
onSelect	SelectEvent Description: Denotes user has selected one or multiple child components(a set of treeitem).

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