Tree

Employment/Purpose

A tree consists of three 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.

Although treecols is optional, if it exists, notice that the number of its child (treecol) should equal the number of treecell, so that tree can display its content correctly. If treecols contains no treecol, the tree will display nothing in its content.

Example

2-Column Tree

<window title="tree demo" border="normal" width="400px" >
    <tree id="tree" 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>

Default Selection

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

Change Style

To change the style of tree icon, you may call setZclass(String style). Four built in style includes “z-tree”,”z-dottree”,”z-filetree”,”z-vfiletree”

Deprecated Since 7.0

Since ZK 7.0.0, the dottree, filetree and vfiletree styles are deprecated because designs are changed.

Keyboard Navigation Tree

  • Press UP and DOWN to move the selection up and down by one tree item.
  • Press PgUp and PgDn to move the selection up and down by one page.
  • Press HOME to move the selection to the first item, and END to the last item.
  • Press RIGHT to open a tree item, and LEFT to close a tree item.
  • Press Ctrl+UP and Ctrl+DOWN to move the focus up and down by one tree item without changing the selection.
  • Press SPACE to select the item in focus.

Paging

Autopaging

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

Note: If enable the autopaging, the height of each row will be applied the following CSS by default. If you want to change the height, please overwrite the CSS rule as your preference.

.z-tree-autopaging .z-treecell-cnt,
.z-dottree-autopaging .z-treecell-cnt,
.z-filetree-autopaging .z-treecell-cnt,
.z-vfiletree-autopaging .z-treecell-cnt {
    height: 30px;
    overflow: hidden;
}

since 5.0

Note: In ZK 7, we change the naming .z-treecell-cnt to .z-treecell-content. since 7.0

PagingDisabled

since 8.0 Once the pagingDisabled is set to true, users will be blocked from navigating through the pagination.

The onPaging and onPageSize Event

When a user clicks to scroll up and down the page, the onPaging event is sent along with a org.zkoss.zul.event.PagingEvent instance. Similarly, the onPageSize event is sent along with an org.zkoss.zul.event.PageSize instance.

Frozen Component

In ZK 7 you are now able to freeze columns within a Tree. This mirrors functionality seen within Excel and makes data in these components easier to read, interpret and handle.

The following code demonstrates how to freeze a column within a Tree:

<tree id="tree" rows="5" width="600px">
    <frozen columns="2" start="1" />
    <treecols sizable="true">
        <treecol width="100px">ID</treecol>
        <treecol width="50px">Priority</treecol>
        <treecol width="50px">Status</treecol>
        <treecol width="150px">Summary</treecol>
        <treecol width="250px">Detail</treecol>
    </treecols>
    <treechildren>
        <treeitem>
            <treerow>
                <treecell>0001</treecell>
                <treecell>1</treecell>
                <treecell>closed</treecell>
                <treecell>Fix login issue</treecell>
                <treecell>Login does not work at all</treecell>
            </treerow>
        </treeitem>
        <treeitem>
            <treerow>
                <treecell>0002</treecell>
                <treecell>3</treecell>
                <treecell>open</treecell>
                <treecell>Button style broken</treecell>
                <treecell>Check main.css</treecell>
            </treerow>
            <treechildren>
                <treeitem>
                    <treerow>
                        <treecell>00021</treecell>
                        <treecell>1</treecell>
                        <treecell>closed</treecell>
                        <treecell>Fix logout issue</treecell>
                        <treecell>Logout does not work at all</treecell>
                    </treerow>
                </treeitem>
            </treechildren>
        </treeitem>
        <treeitem>
            <treerow>
                <treecell>0003</treecell>
                <treecell>2</treecell>
                <treecell>open</treecell>
                <treecell>Client search result</treecell>
                <treecell>Search service returns incomplete result</treecell>
            </treerow>
        </treeitem>
    </treechildren>
</tree>

since 7.0

Selection

Nonselectable Tags

since 5.0

By default, when a user clicks on an HTML element like