grid.zul

ZK是一个Ajax Java Web框架

<?xml version="1.0" encoding="UTF-8"?>
<!--
grid.zul

{{IS_NOTE
	Purpose:
		
	Description:
		
	History:
		Tue Oct 25 17:49:05     2005, Created by tomyeh
}}IS_NOTE

Copyright (C) 2005 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<window title="Grid Demo">
  <checkbox label="sizable" onCheck="cs.sizable = self.checked"/>
	<grid>
		<columns id="cs">
			<column label="AA"/>
			<column label="BB"/>
			<column label="CC"/>
		</columns>
		<auxhead>
			<auxheader label="A+B" colspan="2"/>
			<auxheader label="C"/>
		</auxhead>
		<rows>
			<row>
				<label value="AA01"/>
				<label value="BB01"/>
				<label value="CC01"/>
			</row>
			<row>
				<label value="AA01"/>
				<label value="BB01"/>
				<label value="CC01"/>
			</row>
			<row>
				<label value="AA01"/>
				<label value="BB01"/>
				<label value="CC01"/>
			</row>
		</rows>
	</grid>

	<separator bar="true"/>

	<style>
	tr.odd td.gc {
		background: yellow;
	}
	</style>
	Note: the odd row's color shall be red (controlled by the style component).
	<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(0).getValue(),
				s2 = o2.getChildren().get(0).getValue();
			int v = s1.compareTo(s2);
			return _asc ? v: -v;
		}
	}
	Comp asc = new Comp(true), dsc = new Comp(false);
	</zscript>
	<grid id="grid" width="500px" height="100px">
		<columns sizable="true">
			<column id="col" label="Order"  sortAscending="${asc}" sortDescending="${dsc}"/>
			<column label="Head 1"/>
			<column label="Head 2" align="center"/>
			<column label="Head 3" align="right"/>
		</columns>
		<rows>
			<row>
				Orange
				<listbox mold="select">
					<listitem label="AB"/>
					<listitem label="CD"/>
				</listbox>
				<datebox/>
				<textbox rows="3"/>
			</row>
			<row>
				Apple
				<label value="A11"/>
				<label value="A12"/>
				<label value="A13"/>
			</row>
			<row>
				Lemon
				<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>
				Tomato
				<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>
	<button label="Change width" onClick="changeWidth()"/>
	<button label="Add row" onClick="addRow()"/>
	<button label="Insert row" onClick="insRow()"/>
	<zscript>
	void changeWidth() {
		col.setWidth("200px");
	}
	void addRow() {
		Row r = new Row();
		new Label("A31").setParent(r);
		new Label("A32").setParent(r);
		grid.getRows().appendChild(r);
	}
	void insRow() {
		Row r = new Row();
		new Label("Ins1").setParent(r);
		new Label("Ins2").setParent(r);
		grid.getRows().insertBefore(r, grid.getRows().getChildren().get(0));
	}
	addRow();
	</zscript>
	<separator bar="true"/>
	<grid oddRowSclass="none">
		<rows>
			<row>
				Another with full width and no striping
				<textbox cols="30" rows="5"/>
			</row>
			<row>
				Second row
				<label value="cell 2"/>
			</row>
			<row>
				Third row
				<label value="cell 3"/>
			</row>
		</rows>
	</grid>
	<separator bar="true"/>
	Horz Scrollbar only (20%)
	<grid width="20%">
		<columns>
			<column width="200px" label="Head 1"/>
			<column width="200px" label="Head 2" align="center"/>
			<column width="200px" label="Head 3" align="right"/>
		</columns>
		<rows>
			<row>
				<listbox mold="select">
					<listitem label="AB"/>
					<listitem label="CD"/>
				</listbox>
				<datebox/>
				<textbox rows="3"/>
			</row>
			<row spans="1,2">
				The following cell is span2
				<radiogroup>
					<radio label="Apple"/>
					<radio label="Orange" checked="true"/>
					<radio label="Lemon"/>
				</radiogroup>
			</row>
			<row>
				<label value="A11"/>
				<label value="A12"/>
				<label value="A13"/>
			</row>
			<row>
				<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>
				<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>
	<separator bar="true"/>
	Horz and Vert Scrollbar (200px * 100px)
	<grid width="200px" height="100px">
		<columns>
			<column width="200px" label="Head 1"/>
			<column width="200px" label="Head 2" align="center"/>
			<column width="200px" label="Head 3" align="right"/>
		</columns>
		<rows>
			<row>
				<listbox mold="select">
					<listitem label="AB"/>
					<listitem label="CD"/>
				</listbox>
				<datebox/>
				<textbox rows="3"/>
			</row>
			<row>
				<label value="A11"/>
				<label value="A12"/>
				<label value="A13"/>
			</row>
			<row>
				<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>
				<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>
	<separator bar="true"/>
	<grid>
		<columns>
			<column/>
			<column align="center"/>
			<column align="right"/>
		</columns>
		<rows>
			<row>Testing whether header is visible</row>
		</rows>
	</grid>

	Test the paging mold:
	<grid width="200px" mold="paging">
		<columns>
			<column label="Head 1"/>
			<column label="Head 2" align="center"/>
			<column label="Head 3" align="right"/>
		</columns>
		<rows>
			<row>
				<listbox mold="select">
					<listitem label="AB"/>
					<listitem label="CD"/>
				</listbox>
				<datebox/>
				<textbox rows="3"/>
			</row>
			<row>
				<label value="A11"/>
				<label value="A12"/>
				<label value="A13"/>
			</row>
			<row>
				<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>
				<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>

	<grid width="400px">
		<rows>
			<row height="100px">1</row>
			<row height="100px">2</row>
			<row>3</row>
			<row>4</row>
			<row>5</row>
			<row>6</row>
			<row>7</row>
			<row>8</row>
			<row>9</row>
			<row>10</row>
		</rows>
	</grid>
	
	<grid>
	<auxhead>
		<auxheader label="A" rowspan="2" />
		<auxheader label="B" rowspan="2" />
		<auxheader label="C" colspan="2" />
	</auxhead>

	<auxhead>
		<auxheader label="C" colspan="2" />
	</auxhead>
	<columns sizable="true">
		<column label="AA" />
		<column label="BB" />
		<column label="CC" />
	</columns>
	<rows>
		<row>
			<label value="AA01" />
			<label value="BB01" />
			<label value="CC01" />
		</row>
		<row>
			<label value="AA01" />
			<label value="BB01" />
			<label value="CC01" />
		</row>
		<row>
			<label value="AA01" />
			<label value="BB01" />
			<label value="CC01" />
		</row>
	</rows>
</grid>
</window>