📄 paginggrid.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--pagingGrid.zul{{IS_NOTE Purpose: Description: History: Thu Nov 20 15:07:51 2008, Created by jumperchen}}IS_NOTECopyright (C) 2008 Potix Corporation. All Rights Reserved.{{IS_RIGHT}}IS_RIGHT--><window id="demo" apply="org.zkoss.zkdemo.userguide.DemoWindowComposer"> <html><![CDATA[ <h4>Paging with Grid</h4> <p>Grid allows contents to be displayed across several pages, this is achieved by setting mold="paging".<a href="javascript:;" onclick="if (!zk.isVisible($e('infos'))) {anima.slideDown($e('infos'));} else {anima.slideUp($e('infos'));}">More..</a></p> <p style="display:none" id="infos">It is better to display a large number of data across multiple pages by specifying the paging mold. You can also specify the paging position to be either top, bottom, or both</p> ]]></html> <separator/> <tabbox width="100%" tabscroll="false"> <tabs> <tab id="demoView" label="Demo"/> <tab id="srcView" label="View Source"/> </tabs> <tabpanels> <tabpanel> <window id="view"> </window> </tabpanel> <tabpanel> <panel> <panelchildren> <textbox id="codeView" class="code" rows="20" width="95%"> <attribute name="value"><![CDATA[<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> ]]></attribute> </textbox> </panelchildren> <toolbar mold="panel">
<button id="tryBtn" label="Try me!"/> <button id="reloadBtn" label="Reload" height="18px"/> </toolbar> </panel> </tabpanel> </tabpanels> </tabbox></window>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -