Componen, Fungsi & Event Framework zkoss - VIII [ Gridbox - II ]

 

Berikut adalah contoh componen pada zkoss 

4.  Grid with grouping

<zk>

<zscript>

import org.zkoss.zksandbox.*;

Comparator asc = new RowLabelComparator(true),

dsc = new RowLabelComparator(false);

</zscript>

<grid>

<columns sizable="true">

<column label="Brand" sortAscending="&#36;{asc}" sortDescending="&#36;{dsc}" hflex="2"/>

<column label="Processor Type" hflex="1"/>

<column label="Memory (RAM)" hflex="1"/>

<column label="Price"  hflex="1"/>

<column label="Hard Drive Capacity" hflex="1"/>

</columns>

<rows>

<group label="Dell"/>

<row>

<label style="padding-left:15px" value="Dell E4500 2.2GHz"/>

<label value="Intel Core 2 Duo"/>

<label value="2GB RAM"/>

<label value="$261.00" style="color:green"/>

<label value="500GB"/>

</row>

<row>

<label style="padding-left:15px" value="XP-Pro Slim Dell-Inspiron-530-s"/>

<label value="Intel Core 2 Duo"/>

<label value="2GB RAM"/>

<label value="$498.93" style="color:green"/>

<label value="500GB"/>

</row>

<row>

<label style="padding-left:15px" value="Dell P4 3.2 GHz"/>

<label value="Intel Pentium 4"/>

<label value="4GB RAM"/>

<label value="$377.99" style="color:green"/>

<label value="500GB"/>

</row>

<group label="Compaq"/>

<row>

<label style="padding-left:15px" value="Compaq SR5113WM"/>

<label value="Intel Core Duo"/>

<label value="1GB RAM"/>

<label value="$279.00" style="color:green"/>

<label value="160GB"/>

</row>

<row>

<label style="padding-left:15px" value="Compaq HP XW4200"/>

<label value="Intel Pentium 4"/>

<label value="4GB RAM"/>

<label value="$980" style="color:green"/>

<label value="500GB"/>

</row>

<groupfoot spans="5">

<label value="This a summary about Compaq Desktop PCs"/>

</groupfoot>

</rows>

</grid>

</zk>



5. Grid Live Grouping

<zk>

<zscript>

import org.zkoss.zksandbox.*;

LiveGroupRenderer renderer = new LiveGroupRenderer();

</zscript>

<zscript>

String[][][] datas = new String[][][]{

new String[][] {

// Today

new String[]{"1","[zk1 - Help] RE: Bandbox Autocomplete Problem","2008/11/18 10:16:27","16KB"},

new String[]{"2","[zk1 - Help] RE: Bandbox Autocomplete Problem","2008/11/18 10:14:27","18KB"},

new String[]{"3","[zk1 - Help] RE: Databinding with radiogroups","2008/11/18 09:47:27","12KB"},

new String[]{"4","[zk1 - Help] RE: It's not possible to navigate a listbox' ite","2008/11/18 09:35:27","12KB"},

new String[]{"5","[zk1 - Help] RE: ZK problem in dynamic menu","2008/11/18 08:37:27","12KB"},

new String[]{"6","[zk1 - Help] RE: FileUpload","2008/11/18 08:27:57","14KB"},

new String[]{"7","[zk1 - Help] RE: Datebox format","2008/11/18 06:27:31","11KB"},

new String[]{"8","[zk1 - Help] RE: Datebox format","2008/11/18 06:17:22","12KB"},

new String[]{"9","[zk1 - Help] FileUpload","2008/11/18 05:07:25","11KB"},

new String[]{"10","[zk1 - Help] FileUpload","2008/11/18 05:07:25","11KB"},

new String[]{"11","[zk1 - Help] FileUpload","2008/11/18 05:07:25","11KB"},

new String[]{"12","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},

new String[]{"13","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},

new String[]{"14","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},

new String[]{"15","[zk1 - General] RE: Opening more than one new browser window","2008/11/18 04:44:17","12KB"},

new String[]{"16","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/18 04:31:12","14KB"},

},

new String[][] {

// Yesterday

new String[]{"1","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 19:44:17","39KB"},

new String[]{"2","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 19:42:17","35KB"},

new String[]{"3","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 19:40:17","26KB"},

new String[]{"4","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 18:14:17","27KB"},

new String[]{"5","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 17:05:17","18KB"},

new String[]{"6","[zk1 - General] RE: Opening more than one new browser window","2008/11/17 16:44:17","19KB"},

new String[]{"7","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},

new String[]{"8","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},

new String[]{"9","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},

new String[]{"10","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 13:31:12","14KB"},

new String[]{"11","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 13:26:37","14KB"},

new String[]{"12","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 13:26:37","14KB"},

new String[]{"13","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 13:26:37","14KB"},

new String[]{"14","[zk1 - Help] RE: Times_Series Chart help","2008/11/17 10:41:33","14KB"},

new String[]{"15","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/17 10:14:27","14KB"},

},

new String[][] {

new String[]{"1","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/15 04:31:12","14KB"},

new String[]{"2","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/15 04:31:12","14KB"},

new String[]{"3","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/15 04:31:12","14KB"},

new String[]{"4","[zk1 - Help] RE: Times_Series Chart help","2008/11/15 03:26:37","14KB"},

new String[]{"5","[zk1 - Help] RE: Times_Series Chart help","2008/11/15 03:26:37","14KB"},

new String[]{"6","[zk1 - Help] RE: Times_Series Chart help","2008/11/15 03:26:37","14KB"},

new String[]{"7","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 12:41:33","14KB"},

new String[]{"8","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 02:41:33","14KB"},

new String[]{"9","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 02:41:33","14KB"},

new String[]{"10","[zk1 - Help] RE: Times_Series Chart help","2008/11/14 02:41:33","14KB"},

new String[]{"11","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},

new String[]{"12","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},

new String[]{"13","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},

new String[]{"14","[zk1 - Help] RE: SelectedItemConverter Question","2008/11/13 02:14:27","14KB"},

}

};

GroupsModel model = new SimpleGroupsModel(datas,new String[]{"Date: Today", "Date: Yesterday", "Date: Last Week"});

</zscript>

<grid id="lb1" vflex="1" model="&#36;{model}" rowRenderer="&#36;{renderer}">

<columns sizable="true">

       <column width="80px" label="From"/>

       <column label="Subject"/>

       <column width="150px" label="Received"/>

       <column width="50px" label="Size"/>

     </columns>

</grid>

</zk>



6. Grid with Paging

<zk>

Paging can be supported to locate at three position: Top, Bottom, and Both.

<radiogroup

onCheck="grid.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">

grid.pagingChild.mold = "os".equals(grid.pagingChild.mold) ? "default" : "os";

</attribute>

</button>

<grid id="grid" mold="paging" pageSize="5">

<columns>

<column label="Index"/>

<column label="Head 1"/>

<column label="Head 2" align="center"/>

<column label="Head 3" align="right"/>

</columns>

<rows>

<row>

1

<listbox mold="select">

<listitem label="AB"/>

<listitem label="CD"/>

</listbox>

<datebox/>

<textbox rows="3"/>

</row>

<row>

2

<label value="A11"/>

<label value="A12"/>

<label value="A13"/>

</row>

<row>

3

<checkbox checked="true" label="Option 1"/>

<checkbox label="Option 2"/>

<radiogroup>

<radio label="Apple"/>

<radio label="Orange" checked="true"/>

<radio label="Lemon"/>

</radiogroup>

</row>

<row>

4

<checkbox checked="true" label="Option 1"/>

<checkbox label="Option 2"/>

<radiogroup orient="vertical">

<radio label="Apple"/>

<radio label="Orange" checked="true"/>

<radio label="Lemon"/>

</radiogroup>

</row>

<row>

5

<listbox mold="select">

<listitem label="AB"/>

<listitem label="CD"/>

</listbox>

<datebox/>

<textbox rows="3"/>

</row>

<row>

6

<label value="A11"/>

<label value="A12"/>

<label value="A13"/>

</row>

<row>

7

<checkbox checked="true" label="Option 1"/>

<checkbox label="Option 2"/>

<radiogroup>

<radio label="Apple"/>

<radio label="Orange" checked="true"/>

<radio label="Lemon"/>

</radiogroup>

</row>

<row>

8

<checkbox checked="true" label="Option 1"/>

<checkbox label="Option 2"/>

<radiogroup orient="vertical">

<radio label="Apple"/>

<radio label="Orange" checked="true"/>

<radio label="Lemon"/>

</radiogroup>

</row>

</rows>

</grid>

</zk>


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