📄 detail.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--detail.zul{{IS_NOTE Purpose: Description: History: Mon Nov 17 16:21:50 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>Grid's Master-Details</h4>
<p>A <i>detail</i> section can be placed within a row - as placeholders for particulars.</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>
<style>
tr.myodd td.z-row-inner, tr.myodd {
background-color: #E4EBF8;
}
.myimg {
margin: 5px; border: 1px solid #B0C75E;
}
div.z-column-cnt {
text-align: center; font-weight: bold;
}
div.z-row-cnt span {
font-family: Tahoma,Arial,serif;
color: #0E3A99;
}
</style>
<!-- Due to the security constraint, ZK demo site doesn't allow
<zscript>
class Comp implements Comparator {
private boolean _asc;
public Comp(boolean asc) {
_asc = asc;
}
public int compare(Object o1, Object o2) {
String s1 = o1.getChildren().get(1).getValue(),
s2 = o2.getChildren().get(1).getValue();
int v = s1.compareTo(s2);
return _asc ? v: -v;
}
}
Comp asc = new Comp(true), dsc = new Comp(false);
</zscript>
-->
<zscript>
import org.zkoss.zkdemo.userguide.*;
Comparator asc = new RowDetailComparator(true),
dsc = new RowDetailComparator(false);
</zscript>
<grid fixedLayout="true" width="600px" oddRowSclass="myodd">
<columns>
<column width="25px" />
<column sortAscending="${asc}" sortDescending="${dsc}" label="Product Name"/>
<column width="100px" label="Price"/>
<column label="Item location"/>
</columns>
<rows>
<row>
<detail open="true">
<hbox>
<image sclass="myimg" width="100px" height="100px"
src="/img/item1.jpg" />
<vbox>
<label
value="Item Specifics - Item Condition "
style="font-weight:bold;font-style: italic;" />
<hbox>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Brand:" />
<label value="Apple"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Technology:" />
<label value="DVI"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Monitor Type:" />
<label value="LCD/Flat Panel"
style="font-weight:bold;" />
</hbox>
</vbox>
</hbox>
</detail>
<label
value="Apple 20-inch Aluminum Cinema Display M9177/A" />
<label style="color:green;float:right;"
value="US $202.50" />
<label value="tulsa, ok, United States" />
</row>
<row>
<detail fulfill="onOpen">
<hbox>
<image sclass="myimg" width="100px" height="100px"
src="/img/item2.jpg" />
<vbox>
<label
value="Item Specifics"
style="font-weight:bold;font-style: italic;" />
<hbox>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Brand:" />
<label value="Kyocera"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Phone Type:" />
<label value="Phones without Service Contrac"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Product Type:" />
<label value="Cell Phones"
style="font-weight:bold;" />
</hbox>
</vbox>
</hbox>
</detail>
<label
value="Kyocera Strobe K612B MetroPCS Metro PCS Cell Phone L@@K" />
<label style="color:green;float:right;"
value="US $74.99" />
<label value="Speedy Shipping, USA, United States" />
</row>
<row>
<detail fulfill="onOpen">
<hbox>
<image sclass="myimg" width="100px" height="100px"
src="/img/item3.jpg" />
<vbox>
<label
value="Item Specifics - Video Game Systems"
style="font-weight:bold;font-style: italic;" />
<hbox>
<label value="Manufacturer:" />
<label value="Microsoft"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Platform:" />
<label value="Microsoft Xbox 360"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="MPN:" />
<label value="52T-00013"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Media Type:" />
<label value="DVD-ROM"
style="font-weight:bold;" />
</hbox>
</vbox>
</hbox>
</detail>
<label
value="Halo 3 ed. xbox 360 bundle pack" />
<label style="color:green;float:right;"
value="US $350.00" />
<label value="middletown, PA, United States" />
</row>
<row>
<detail fulfill="onOpen">
<hbox>
<image sclass="myimg" width="100px" height="100px"
src="/img/item4.jpg" />
<vbox>
<label
value="Item Specifics - Cell Phones & Smartphones"
style="font-weight:bold;font-style: italic;" />
<hbox>
<label value="Carrier:" />
<label value="AT&T, Cingular"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Brand:" />
<label value="Apple iPhone"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Technology:" />
<label value="GSM"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Camera:" />
<label value="1-2 Megapixels"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Condition:" />
<label value="Used"
style="font-weight:bold;" />
</hbox>
<hbox>
<label value="Features:" />
<label value="Bluetooth Enabled, Calendar, Color Screen, Email Access, GPS, Internet Browser, MP3 Player, PDA-PC Sync, SMS-Text Messaging, Speakerphone, Touch Screen, USB Interface"
style="font-weight:bold;" />
</hbox>
</vbox>
</hbox>
</detail>
<label
value="Apple iPhone 8GB - 1st Generation, Version 2.0" />
<label style="color:green;float:right;"
value="US $300.00" />
<label value="Aspen, Co, United States" />
</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 + -