Componen, Fungsi & Event Framework zkoss - IX [ Tree - I ]

 

Berikut adalah contoh componen pada zkoss 

1. Tree

<hlayout width="100%">

<tree id="tree" width="400px" rows="8">

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

<treechildren>

<treeitem>

<treerow>

<treecell label="Item 2.1.1" />

</treerow>

</treeitem>

<treeitem>

<treerow>

<treecell label="Item 2.1.2" />

</treerow>

</treeitem>

</treechildren>

</treeitem>

<treeitem>

<treerow>

<treecell label="Item 2.2" />

</treerow>

<treechildren>

<treeitem>

<treerow>

<treecell label="Item 2.2.1" />

</treerow>

</treeitem>

</treechildren>

</treeitem>

</treechildren>

</treeitem>

<treeitem label="Item 3" />

</treechildren>

</tree>

</hlayout>



2. Tree Live Data

<zk>                                  

<zscript>

import org.zkoss.zksandbox.tree.BinaryTreeModel;

BinaryTreeModel btm = new BinaryTreeModel(new ArrayList(new org.zkoss.zksandbox.BigList(1000)));

</zscript>

<tree id="tree" model="&#36;{btm}" vflex="1"/>

</zk>


3. Auxiliary Headers

<grid>

<auxhead>

<auxheader label="H1'07" colspan="6"/>

<auxheader label="H2'07" colspan="6"/>

</auxhead>

<auxhead>

<auxheader label="Q1" colspan="3"/>

<auxheader label="Q2" colspan="3"/>

<auxheader label="Q3" colspan="3"/>

<auxheader label="Q4" colspan="3"/>

</auxhead>

<columns>

<column label="Jan"/><column label="Feb"/><column label="Mar"/>

<column label="Apr"/><column label="May"/><column label="Jun"/>

<column label="Jul"/><column label="Aug"/><column label="Sep"/>

<column label="Oct"/><column label="Nov"/><column label="Dec"/>

</columns>

<rows>

<row>

<label value="1,000"/><label value="1,100"/><label value="1,200"/>

<label value="1,300"/><label value="1,400"/><label value="1,500"/>

<label value="1,600"/><label value="1,700"/><label value="1,800"/>

<label value="1,900"/><label value="2,000"/><label value="2,100"/>

</row>

<row>

<label value="1,500"/><label value="2,100"/><label value="1,200"/>

<label value="1,100"/><label value="2,400"/><label value="1,700"/>

<label value="1,500"/><label value="3,700"/><label value="1,800"/>

<label value="1,300"/><label value="2,000"/><label value="2,500"/>

</row>

</rows>

</grid>


Reference : https://www.zkoss.org/zksandbox/#g2