Berikut adalah contoh componen pada zkoss
4. Tree with checkmarks
<zk>
<button label="Toggle checkmark" onClick="tree.checkmark = !tree.checkmark;"/>
<button label="Toggle multiple" onClick="tree.multiple = !tree.multiple;"/>
<tree id="tree" multiple="true" checkmark="true">
<treecols>
<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"/>
<treecell label="Item 2.2 is something who cares"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="Item 3"/>
</treechildren>
</tree>
</zk>
5. Tree with Paging
<zk>
Paging can be supported to locate at three position: Top, Bottom, and Both.
<radiogroup
onCheck="tree.pagingPosition = self.selectedItem.label;">
<radio label="top" />
<radio label="bottom" checked="true" />
<radio label="both" />
</radiogroup>
<separator/>
<button label="Change Paging Mold">
<attribute name="onClick">
tree.pagingChild.mold = "os".equals(tree.pagingChild.mold) ? "default" : "os";
</attribute>
</button>
<zscript>
import org.zkoss.zksandbox.tree.BinaryTreeModel;
BinaryTreeModel btm = new BinaryTreeModel(new ArrayList(new org.zkoss.zksandbox.BigList(1000)));
</zscript>
<tree id="tree" mold="paging" pageSize="15" model="${btm}">
<attribute name="onCreate">
tree.renderItemByPath(new int[]{1,1,1,1,1,1,1,1,1,1,1,1});
tree.renderItemByPath(new int[]{0,0,0,0,0,0,0,0,0,0,0,0});
</attribute>
</tree>
</zk>
Reference : https://www.zkoss.org/zksandbox/#g2