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

 

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="&#36;{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