https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&feed=atom&action=historyZK Developer's Guide/ZUL Components/Grids, Trees and Listbox/Grids - Revision history2024-03-29T13:46:59ZRevision history for this page on the wikiMediaWiki 1.35.1https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&diff=53495&oldid=prevHawk: correct highlight (via JWB)2022-01-19T10:42:30Z<p>correct highlight (via JWB)</p>
<a href="https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&diff=53495&oldid=14888">Show changes</a>Hawkhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&diff=14888&oldid=prevChar: /* The sort Method */2010-12-14T09:20:02Z<p><span dir="auto"><span class="autocomment">The sort Method</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:20, 14 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l303" >Line 303:</td>
<td colspan="2" class="diff-lineno">Line 303:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><font color="red">Update: </font> see more about sorting [<del class="diffchange diffchange-inline">http:</del>//<del class="diffchange diffchange-inline">docs.zkoss.org/wiki</del>/Multiple_Field_Sorting_on_Listbox Multiple Field Sorting on Listbox].</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><font color="red">Update: </font> see more about sorting [<ins class="diffchange diffchange-inline">[Small_Talks</ins>/<ins class="diffchange diffchange-inline">2009</ins>/<ins class="diffchange diffchange-inline">January</ins>/Multiple_Field_Sorting_on_Listbox <ins class="diffchange diffchange-inline">|</ins>Multiple Field Sorting on Listbox<ins class="diffchange diffchange-inline">]</ins>].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Live Data ===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Live Data ===</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&diff=3608&oldid=prevChar: /* The sort Method */2010-07-23T06:48:01Z<p><span dir="auto"><span class="autocomment">The sort Method</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 06:48, 23 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l303" >Line 303:</td>
<td colspan="2" class="diff-lineno">Line 303:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><font color="red">Update: </font> see more about sorting [<del class="diffchange diffchange-inline">[</del>Multiple Field Sorting on Listbox<del class="diffchange diffchange-inline">]</del>].</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><font color="red">Update: </font> see more about sorting [<ins class="diffchange diffchange-inline">http://docs.zkoss.org/wiki/Multiple_Field_Sorting_on_Listbox </ins>Multiple Field Sorting on Listbox].</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Live Data ===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Live Data ===</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&diff=3116&oldid=prevMaya001122 at 01:28, 15 July 20102010-07-15T01:28:32Z<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:28, 15 July 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l116" >Line 116:</td>
<td colspan="2" class="diff-lineno">Line 116:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== The onColSize Event ====</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== The onColSize Event ====</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Once a user resizes the width, the <tt>onColSize</tt> event is sent with an instance of <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.event.ColSizeEvent</<del class="diffchange diffchange-inline">tt</del>>. Notice that the column's width is adjusted before the<tt> onColSize</tt> event is sent. In other words, the event serves as a notification that you can ignore. Of course, you can do whatever you want in the event listener.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Once a user resizes the width, the <tt>onColSize</tt> event is sent with an instance of <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zul.event.ColSizeEvent</<ins class="diffchange diffchange-inline">javadoc</ins>>. Notice that the column's width is adjusted before the<tt> onColSize</tt> event is sent. In other words, the event serves as a notification that you can ignore. Of course, you can do whatever you want in the event listener.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Grids with Paging ===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Grids with Paging ===</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l241" >Line 241:</td>
<td colspan="2" class="diff-lineno">Line 241:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Grids support the direct sorting of rows. To enable ascending order sorting for a particular column, you need to assign a <tt>java.util.Comparator</tt> instance to the <tt>sortAscending</tt> attribute of the column. Similarly, you assign a comparator to the <tt>sortDescending</tt> property to enable the descending order.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Grids support the direct sorting of rows. To enable ascending order sorting for a particular column, you need to assign a <tt>java.util.Comparator</tt> instance to the <tt>sortAscending</tt> attribute of the column. Similarly, you assign a comparator to the <tt>sortDescending</tt> property to enable the descending order.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>As illustrated below, you first implement a comparator that compares any two rows of the grid, and then assign its instances to the <tt>sortAscending</tt> and/or <tt>sortDescending</tt> attributes. Notice: the <tt>compare</tt> method is passed two <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.Row</<del class="diffchange diffchange-inline">tt</del>> instances.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>As illustrated below, you first implement a comparator that compares any two rows of the grid, and then assign its instances to the <tt>sortAscending</tt> and/or <tt>sortDescending</tt> attributes. Notice: the <tt>compare</tt> method is passed two <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zul.Row</<ins class="diffchange diffchange-inline">javadoc</ins>> instances.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml" ></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="xml" ></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l288" >Line 288:</td>
<td colspan="2" class="diff-lineno">Line 288:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The default sorting algorithm is quick-sort (by use of the <tt>sort</tt> method from the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zk.ui.Components</<del class="diffchange diffchange-inline">tt</del>> class). You can override it with your own implementation.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The default sorting algorithm is quick-sort (by use of the <tt>sort</tt> method from the <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zk.ui.Components</<ins class="diffchange diffchange-inline">javadoc</ins>> class). You can override it with your own implementation.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Note: the <tt>sort</tt> method checks the sort direction (by calling <tt>getSortDirection</tt>). It sorts the rows only if the sort direction is different. To enforce the sorting, do as follows.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Note: the <tt>sort</tt> method checks the sort direction (by calling <tt>getSortDirection</tt>). It sorts the rows only if the sort direction is different. To enforce the sorting, do as follows.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l306" >Line 306:</td>
<td colspan="2" class="diff-lineno">Line 306:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Live Data ===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Live Data ===</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Like list boxes, grids support ''live data''. With live data, developers are able to separate the data from the view. In other words, developers only need to provide the data by implementing the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.ListModel</<del class="diffchange diffchange-inline">tt</del>> interface, rather than manipulating the grid directly. The benefits are twofold.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Like list boxes, grids support ''live data''. With live data, developers are able to separate the data from the view. In other words, developers only need to provide the data by implementing the <<ins class="diffchange diffchange-inline">javadoc type="interface"</ins>>org.zkoss.zul.ListModel</<ins class="diffchange diffchange-inline">javadoc</ins>> interface, rather than manipulating the grid directly. The benefits are twofold.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* It is easier to use different views to show the same set of data.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* It is easier to use different views to show the same set of data.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l313" >Line 313:</td>
<td colspan="2" class="diff-lineno">Line 313:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>There are three steps to make use of live data.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>There are three steps to make use of live data.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>1 Prepare the data in the form of a <tt>ListModel</tt>. ZK has a concrete implementation called <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.SimpleListModel</<del class="diffchange diffchange-inline">tt</del>> for representing an array of objects.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>1 Prepare the data in the form of a <tt>ListModel</tt>. ZK has a concrete implementation called <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zul.SimpleListModel</<ins class="diffchange diffchange-inline">javadoc</ins>> for representing an array of objects.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>2 Implement the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.RowRenderer</<del class="diffchange diffchange-inline">tt</del>> interface for rendering a row of data into the grid.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>2 Implement the <<ins class="diffchange diffchange-inline">javadoc type="interface"</ins>>org.zkoss.zul.RowRenderer</<ins class="diffchange diffchange-inline">javadoc</ins>> interface for rendering a row of data into the grid.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>** This is optional. If it is not specified the default renderer is used to render the data into the first column.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>** This is optional. If it is not specified the default renderer is used to render the data into the first column.</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l343" >Line 343:</td>
<td colspan="2" class="diff-lineno">Line 343:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Sorting with Live Data ====</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Sorting with Live Data ====</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>If you allow users to sort a grid with live data, you have to implement the interface, <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.ListModelExt</<del class="diffchange diffchange-inline">tt</del>>, in addition to the <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.ListModel</<del class="diffchange diffchange-inline">tt</del>>.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>If you allow users to sort a grid with live data, you have to implement the interface, <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zul.ListModelExt</<ins class="diffchange diffchange-inline">javadoc</ins>>, in addition to the <<ins class="diffchange diffchange-inline">javadoc</ins>>org.zkoss.zul.ListModel</<ins class="diffchange diffchange-inline">javadoc</ins>>.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java" ></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java" ></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l356" >Line 356:</td>
<td colspan="2" class="diff-lineno">Line 356:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>When a user wants to sort the grid, the grid will invoke the <tt>sort</tt> method of <tt>ListModelExt</tt> to sort the data. In other words, the sorting is done by the list model, rather than the grid.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>When a user wants to sort the grid, the grid will invoke the <tt>sort</tt> method of <tt>ListModelExt</tt> to sort the data. In other words, the sorting is done by the list model, rather than the grid.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>After sorting, the list model will notify the grid by invoking the <tt>onChange</tt> method of the grid』s registered <<del class="diffchange diffchange-inline">tt</del>>org.zkoss.zul.event.ListDataListener</<del class="diffchange diffchange-inline">tt</del>> instances. These are registered by the <tt>addListDataListener</tt> method. In most cases, all the data is changed, so the list model usually sends the following event:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>After sorting, the list model will notify the grid by invoking the <tt>onChange</tt> method of the grid』s registered <<ins class="diffchange diffchange-inline">javadoc type="interface"</ins>>org.zkoss.zul.event.ListDataListener</<ins class="diffchange diffchange-inline">javadoc</ins>> instances. These are registered by the <tt>addListDataListener</tt> method. In most cases, all the data is changed, so the list model usually sends the following event:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java" ></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java" ></div></td></tr>
</table>Maya001122https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Guide/ZUL_Components/Grids,_Trees_and_Listbox/Grids&diff=3028&oldid=prevMaya001122: Created page with '{{ZKDevelopersGuidePageHeader}} __TOC__ Components: <tt>grid</tt>, <tt>columns</tt>, <tt>column</tt>, <tt>rows</tt> and <tt>row</tt>. A grid contains components that are align…'2010-07-14T07:04:05Z<p>Created page with '{{ZKDevelopersGuidePageHeader}} __TOC__ Components: <tt>grid</tt>, <tt>columns</tt>, <tt>column</tt>, <tt>rows</tt> and <tt>row</tt>. A grid contains components that are align…'</p>
<p><b>New page</b></p><div>{{ZKDevelopersGuidePageHeader}}<br />
<br />
__TOC__<br />
<br />
Components: <tt>grid</tt>, <tt>columns</tt>, <tt>column</tt>, <tt>rows</tt> and <tt>row</tt>.<br />
<br />
A grid contains components that are aligned in rows like tables. Inside a grid, you declare two things, the columns and the rows. Within the columns you define the header and the column attributes and then provide the row content.<br />
<br />
To declare row data use the <tt>rows</tt> component which is a child element of <tt>grid</tt>. Inside that you should add <tt>row</tt> components, which are used for each row. Inside the row element, you should place the content that you want inside that row. Each child is a column of the specific row.<br />
<br />
Similarly, the columns are declared with the <tt>columns</tt> component, which should be a child element of <tt>grid</tt>. <tt>column</tt> declares the common attributes of each column, such as the width and alignment, and optional headers, i.e., label and/or image.<br />
<br />
[[Image:100000000000017D0000004DD592B1C3.png]]<br />
<br />
<source lang="xml" > <br />
<grid><br />
<columns><br />
<column label="Type"/><br />
<column label="Content"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="File:"/><br />
<textbox width="99%"/><br />
</row><br />
<row><br />
<label value="Type:"/><br />
<hbox><br />
<listbox rows="1" mold="select"><br />
<listitem label="Java Files,(*.java)"/><br />
<listitem label="All Files,(*.*)"/><br />
</listbox><br />
<button label="Browse..."/><br />
</hbox><br />
</row><br />
</rows><br />
</grid><br />
</source><br />
<br />
=== Scrollable Grid ===<br />
[[Image:10000000000001FC0000009FFC9DC218.png]]<br />
<br />
A grid can be scrollable if you specify the <tt>height</tt> attribute and there is not enough space to display all data.<br />
<br />
<source lang="xml" ><br />
<grid width="500px" height="130px"><br />
<columns><br />
<column label="Head 1"/><br />
<column label="Head 2" align="center"/><br />
<column label="Head 3" align="right"/><br />
</columns><br />
<rows><br />
<row><br />
<listbox mold="select"><br />
<listitem label="Faster"/><br />
<listitem label="Fast"/><br />
<listitem label="Average"/><br />
</listbox><br />
<datebox/><br />
<textbox rows="2"/><br />
</row><br />
<row><br />
<checkbox checked="true" label="Option 1"/><br />
<checkbox label="Option 2"/><br />
<radiogroup><br />
<radio label="Apple"/><br />
<radio label="Orange" checked="true"/><br />
<radio label="Lemon"/><br />
</radiogroup><br />
</row><br />
<row><br />
<checkbox checked="true" label="Option 1"/><br />
<checkbox label="Option 2"/><br />
<radiogroup orient="vertical"><br />
<radio label="Apple"/><br />
<radio label="Orange" checked="true"/><br />
<radio label="Lemon"/><br />
</radiogroup><br />
</row><br />
</rows><br />
</grid><br />
</source><br />
<br />
=== Sizable Columns ===<br />
If you allow users to resize the width of your columns, you can set the <tt>sizable</tt> attribute of your columns as <tt>true</tt>. Once allowed, users can resize the widths of columns by dragging the border between adjacent <tt>column</tt> components.<br />
<br />
<source lang="xml" ><br />
<window><br />
<grid><br />
<columns id="cs" sizable="true"><br />
<column label="AA"/><br />
<column label="BB"/><br />
<column label="CC"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="AA01"/><br />
<label value="BB01"/><br />
<label value="CC01"/><br />
</row><br />
<row><br />
<label value="AA01"/><br />
<label value="BB01"/><br />
<label value="CC01"/><br />
</row><br />
<row><br />
<label value="AA01"/><br />
<label value="BB01"/><br />
<label value="CC01"/><br />
</row><br />
</rows><br />
</grid><br />
<checkbox label="sizeable" checked="true" onCheck="cs.sizeable = self.checked"/><br />
</window><br />
</source><br />
<br />
==== The onColSize Event ====<br />
Once a user resizes the width, the <tt>onColSize</tt> event is sent with an instance of <tt>org.zkoss.zul.event.ColSizeEvent</tt>. Notice that the column's width is adjusted before the<tt> onColSize</tt> event is sent. In other words, the event serves as a notification that you can ignore. Of course, you can do whatever you want in the event listener.<br />
<br />
=== Grids with Paging ===<br />
There are two ways to handle large content in a grid, scrolling and paging. Scrolling is enabled by setting the <tt>height</tt> attribute as discussed in the previous section. Paging is enabled by setting the <tt>mold</tt> attribute to <tt>paging</tt>. Once paging is enabled, the grid separates the content into several pages and displays one page at a time as depicted below.<br />
<br />
[[Image:1000000000000133000000737A37B110.png]]<br />
<br />
<source lang="xml" > <br />
<grid width="300px" mold="paging" pageSize="4"><br />
<columns><br />
<column label="Left"/><br />
<column label="Right"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="Item 1.1"/><label value="Item 1.2"/><br />
</row><br />
<row><br />
<label value="Item 2.1"/><label value="Item 2.2"/><br />
</row><br />
<row><br />
<label value="Item 3.1"/><label value="Item 3.2"/><br />
</row><br />
<row><br />
<label value="Item 4.1"/><label value="Item 4.2"/><br />
</row><br />
<row><br />
<label value="Item 5.1"/><label value="Item 5.2"/><br />
</row><br />
<row><br />
<label value="Item 6.1"/><label value="Item 6.2"/><br />
</row><br />
<row><br />
<label value="Item 7.1"/><label value="Item 7.2"/><br />
</row><br />
</rows><br />
</grid><br />
</source><br />
<br />
Once the paging mold is set, the grid creates an instance of the <tt>paging</tt> component '''as a child of the grid''' and the paging component in turn handles the grid』s paging. Therefore, the number of the <tt>grid』s</tt> children includes the paging component. Also, if you remove all children of the <tt>grid</tt>, the <tt>paging</tt> is also removed.<br />
<br />
==== The pageSize Property ====<br />
Having set the <tt>paging</tt> mold, you can specify how many rows are visible at a time (i.e., the page size) by setting the <tt>pageSize</tt> attribute to a numeric value. By default, it is 20.<br />
<br />
==== The paginal Property ====<br />
If you prefer to place the <tt>paging</tt> component in a different location or you want to control two or more grids with the same <tt>paging</tt> component, you can assign the <tt>paginal</tt> attribute explicitly. Note: if it is not set explicitly, it is the same as the <tt>paging</tt> property.<br />
<br />
[[Image:100000000000026C00000066A82ED1BB.png]]<br />
<br />
<source lang="xml" > <br />
<vbox><br />
<paging id="pg" pageSize="4"/><br />
<hbox><br />
<grid width="300px" mold="paging" paginal="${pg}"><br />
<columns><br />
<column label="Left"/><column label="Right"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="Item 1.1"/><label value="Item 1.2"/><br />
</row><br />
<row><br />
<label value="Item 2.1"/><label value="Item 2.2"/><br />
</row><br />
<row><br />
<label value="Item 3.1"/><label value="Item 3.2"/><br />
</row><br />
<row><br />
<label value="Item 4.1"/><label value="Item 4.2"/><br />
</row><br />
<row><br />
<label value="Item 5.1"/><label value="Item 5.2"/><br />
</row><br />
<row><br />
<label value="Item 6.1"/><label value="Item 6.2"/><br />
</row><br />
<row><br />
<label value="Item 7.1"/><label value="Item 7.2"/><br />
</row><br />
</rows><br />
</grid><br />
<grid width="300px" mold="paging" paginal="${pg}"><br />
<columns><br />
<column label="Left"/><column label="Right"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="Item A.1"/><label value="Item A.2"/><br />
</row><br />
<row><br />
<label value="Item B.1"/><label value="Item B.2"/><br />
</row><br />
<row><br />
<label value="Item C.1"/><label value="Item C.2"/><br />
</row><br />
<row><br />
<label value="Item D.1"/><label value="Item D.2"/><br />
</row><br />
<row><br />
<label value="Item E.1"/><label value="Item E.2"/><br />
</row><br />
<row><br />
<label value="Item F.1"/><label value="Item F.2"/><br />
</row><br />
</rows><br />
</grid><br />
</hbox><br />
</vbox><br />
</source><br />
<br />
==== The paging Property ====<br />
It is a read-only attribute representing the child <tt>paging</tt> component that is created automatically. It is null if you assign external paging via the <tt>paginal</tt> attribute. You rarely need to access this attribute as it is generally better to use the <tt>paginal</tt> attribute.<br />
<br />
==== The onPaging Event and Method ====<br />
Once a user clicks the page number of the <tt>paging</tt> component, an <tt>onPaging</tt> event is sent the grid. It is then processed by the <tt>onPaging</tt> method. By default, the method invalidates, i.e., redraws, the content of <tt>rows</tt>.<br />
<br />
If you want to implement "create-on-demand" feature, you can add a event listener to the grid for the <tt>onPaging</tt> event. The line below demonstrates how to add an EventListener.<br />
<br />
<source lang="java" ><br />
grid.addEventListener(org.zkoss.zul.event.ZulEvents.ON_PAGING, new MyListener());<br />
</source><br />
<br />
=== Sorting ===<br />
Grids support the direct sorting of rows. To enable ascending order sorting for a particular column, you need to assign a <tt>java.util.Comparator</tt> instance to the <tt>sortAscending</tt> attribute of the column. Similarly, you assign a comparator to the <tt>sortDescending</tt> property to enable the descending order.<br />
<br />
As illustrated below, you first implement a comparator that compares any two rows of the grid, and then assign its instances to the <tt>sortAscending</tt> and/or <tt>sortDescending</tt> attributes. Notice: the <tt>compare</tt> method is passed two <tt>org.zkoss.zul.Row</tt> instances.<br />
<br />
<source lang="xml" ><br />
<zk><br />
<zscript><br />
class MyRowComparator implements Comparator {<br />
public MyRowComparator(boolean ascending) {<br />
...<br />
}<br />
public int compare(Object o1, Object o2) {<br />
Row r1 = (Row)o1, r2 = (Row)o2;<br />
....<br />
}<br />
}<br />
Comparator asc = new MyRowComparator(true);<br />
Comparator dsc = new MyRowComparator(false);<br />
</zscript><br />
<grid><br />
<columns><br />
<column sortAscending="${asc}" sortDescending="${dsc}"/><br />
...<br />
</source><br />
<br />
==== The sortDirection Property ====<br />
The <tt>sortDirection</tt> property controls whether to show an icon to indicate the order of a particular column. If rows are sorted before being added to the grid, you should set this property explicitly.<br />
<br />
<column sortDirection="ascending"/><br />
<br />
It is then maintained automatically by the grid as long as you assign the comparators to the corresponding column.<br />
<br />
==== The onSort Event ====<br />
When you assign at least one comparator to a column, an <tt>onSort</tt> event is sent to the server if user clicks on it. The <tt>column</tt> component implements a listener to automatically sort rows based on the assigned comparator.<br />
<br />
If you prefer to handle this manually, you can add your own listener to the column for the <tt>onSort</tt> event. To prevent the default listener to invoking the <tt>sort</tt> method, you have to call the <tt>stopPropagation</tt> method for the event being received. Alternatively, you can override the <tt>sort</tt> method, see below.<br />
<br />
==== The sort Method ====<br />
The <tt>sort</tt> method is the underlying implementation of the default <tt>onSort</tt> event listener. It is also useful if you want to sort the rows using Java code. For example, you might have to call this method after adding rows (assuming they not in the proper order).<br />
<br />
<source lang="java" ><br />
Row row = new Row();<br />
row.setParent(rows);<br />
row.appendChild(...);<br />
...<br />
if (!"natural".column.getSortDirection())<br />
column.sort("ascending".equals(column.getSortDirection()));<br />
</source><br />
<br />
The default sorting algorithm is quick-sort (by use of the <tt>sort</tt> method from the <tt>org.zkoss.zk.ui.Components</tt> class). You can override it with your own implementation.<br />
<br />
Note: the <tt>sort</tt> method checks the sort direction (by calling <tt>getSortDirection</tt>). It sorts the rows only if the sort direction is different. To enforce the sorting, do as follows.<br />
<br />
<source lang="java" ><br />
column.setSortDirection("natural");<br />
sort(myorder);<br />
</source><br />
<br />
The above code is equivalent to the following.<br />
<br />
<source lang="java" ><br />
sort(myorder, true);<br />
</source><br />
<br />
<font color="red">Update: </font> see more about sorting [[Multiple Field Sorting on Listbox]].<br />
<br />
=== Live Data ===<br />
Like list boxes, grids support ''live data''. With live data, developers are able to separate the data from the view. In other words, developers only need to provide the data by implementing the <tt>org.zkoss.zul.ListModel</tt> interface, rather than manipulating the grid directly. The benefits are twofold.<br />
<br />
* It is easier to use different views to show the same set of data.<br />
* The grid sends the data to the client only if it is visible. It saves a lot of network traffic if the amount of data is large.<br />
<br />
There are three steps to make use of live data.<br />
<br />
1 Prepare the data in the form of a <tt>ListModel</tt>. ZK has a concrete implementation called <tt>org.zkoss.zul.SimpleListModel</tt> for representing an array of objects.<br />
2 Implement the <tt>org.zkoss.zul.RowRenderer</tt> interface for rendering a row of data into the grid.<br />
<br />
** This is optional. If it is not specified the default renderer is used to render the data into the first column.<br />
** You can implement different renderers for representing the same data in different views.<br />
<br />
3 Set the data in the <tt>model</tt> attribute and, optionally, the renderer in the <tt>rowRenderer</tt> attribute.<br />
<br />
In the following example, we prepared a list model called <tt>strset</tt>, assign it to a grid using the <tt>model</tt> attribute. Then, the grid will do the rest.<br />
<br />
[[Image:100000000000006900000083A11BBF49.png]]<br />
<br />
<source lang="xml" ><br />
<window title="Live Grid" border="normal"><br />
<zscript><br />
String[] data = new String[30];<br />
for(int j=0; j &lt; data.length; ++j) {<br />
data[j] = "option "+j;<br />
}<br />
ListModel strset = new SimpleListModel(data);<br />
</zscript><br />
<grid width="100px" height="100px" model="${strset}"><br />
<columns><br />
<column label="options"/><br />
</columns><br />
</grid><br />
</window><br />
</source><br />
<br />
==== Sorting with Live Data ====<br />
If you allow users to sort a grid with live data, you have to implement the interface, <tt>org.zkoss.zul.ListModelExt</tt>, in addition to the <tt>org.zkoss.zul.ListModel</tt>.<br />
<br />
<source lang="java" ><br />
class MyListModel implements ListModel, ListModelExt {<br />
public void sort(Comparator cmpr, boolean ascending) {<br />
//do the real sorting<br />
//notify the grid (or listbox) that data is changed by use of ListDataEvent<br />
}<br />
}<br />
</source><br />
<br />
When a user wants to sort the grid, the grid will invoke the <tt>sort</tt> method of <tt>ListModelExt</tt> to sort the data. In other words, the sorting is done by the list model, rather than the grid.<br />
<br />
After sorting, the list model will notify the grid by invoking the <tt>onChange</tt> method of the grid』s registered <tt>org.zkoss.zul.event.ListDataListener</tt> instances. These are registered by the <tt>addListDataListener</tt> method. In most cases, all the data is changed, so the list model usually sends the following event:<br />
<br />
<source lang="java" ><br />
new ListDataEvent(this, ListDataEvent.CONTENTS_CHANGED, -1, -1) <br />
</source><br />
<br />
=== Auxiliary Headers ===<br />
In addition to columns, you can specify auxiliary headers with the <tt>auxhead</tt> and <tt>auxheader</tt> components as follows.<br />
<br />
<source lang="xml" ><br />
<grid><br />
<auxhead><br />
<auxheader label="H1'07" colspan="6"/><br />
<auxheader label="H2'07" colspan="6"/><br />
</auxhead><br />
<auxhead><br />
<auxheader label="Q1" colspan="3"/><br />
<auxheader label="Q2" colspan="3"/><br />
<auxheader label="Q3" colspan="3"/><br />
<auxheader label="Q4" colspan="3"/><br />
</auxhead><br />
<columns><br />
<column label="Jan"/><column label="Feb"/><column label="Mar"/><br />
<column label="Apr"/><column label="May"/><column label="Jun"/><br />
<column label="Jul"/><column label="Aug"/><column label="Sep"/><br />
<column label="Oct"/><column label="Nov"/><column label="Dec"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="1,000"/><label value="1,100"/><label value="1,200"/><br />
<label value="1,300"/><label value="1,400"/><label value="1,500"/><br />
<label value="1,600"/><label value="1,700"/><label value="1,800"/><br />
<label value="1,900"/><label value="2,000"/><label value="2,100"/><br />
</row><br />
</rows><br />
</grid><br />
</source><br />
<br />
[[Image:1000000000000235000000602BB4CFD2.png]]<br />
<br />
The auxiliary headers support the <tt>colspan</tt> and <tt>rowsspan</tt> attributes that the column header don't. However, as its』 name suggests, the auxiliary headers must be placed within a <tt>column</tt>.<br />
<br />
Unlike <tt>column</tt>/<tt>columns</tt>, which can only be used with <tt>grid</tt>, <tt>auhead</tt>/<tt>auxheader</tt> can be used with <tt>grid</tt>, <tt>listbox</tt> and <tt>tree</tt>.<br />
<br />
=== Special Properties ===<br />
==== The spans Property ====<br />
It is a list of comma separated integers, controlling whether to span a cell over several columns. The first number in the list denotes the number of columns the first cell shall span. The second number denotes the number of columns the second cell will span and so on. If a number is omitted, 1 is assumed.<br />
<br />
For example,<br />
<br />
<source lang="xml" ><br />
<grid><br />
<columns><br />
<column label="Left" align="left"/><column label="Center" align="center"/><br />
<column label="Right" align="right"/><column label="Column 4"/><br />
<column label="Column 5"/><column label="Column 6"/><br />
</columns><br />
<rows><br />
<row><br />
<label value="Item A.1"/><label value="Item A.2"/><br />
<label value="Item A.3"/><label value="Item A.4"/><br />
<label value="Item A.5"/><label value="Item A.6"/><br />
</row><br />
<row spans="1,2,2"><br />
<label value="Item B.1"/><label value="Item B.2"/><br />
<label value="Item B.4"/><label value="Item B.6"/><br />
</row><br />
<row spans="3"><br />
<label value="Item C.1"/><label value="Item C.4"/><br />
<label value="Item C.5"/><label value="Item C.6"/><br />
</row><br />
<row spans=",,2,2"><br />
<label value="Item D.1"/><label value="Item D.2"/><br />
<label value="Item D.3"/><label value="Item D.5"/><br />
</row><br />
</rows><br />
</grid><br />
</source><br />
<br />
{{ ZKDevelopersGuidePageFooter}}</div>Maya001122