zk 資料繫結例項（grid巢狀）
忙了一天終於把這個問題搞定了，雖然有點累，不過心裡很興奮，呵呵！
進入正題！
問題： grid裡巢狀grid。
解決方式： 利用zk的資料繫結方式對grid資料進行賦值。
第一步:首先建立外層grid頁面。程式碼如下：
<?page title="devices" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" root="../lmtInfoWindow"?>
<zk>
<style dynamic="true">
tr.z-row .z-detail-outer, tr.z-row .z-row-inner { background:
none; }
tr.z-row td.z-row-inner { border-left-width: 0;
border-right-width: 0; border-color: gray; }
.z-column .z-column-cnt { padding: 2px; font-weight: bold;
font-size:13px;}
tr.z-row.last td:first-child span { font-weight: bold; color:
#06488E; }
tr.z-row td.z-row-inner { border: 0; }
.sapphire .inner-grid tr.z-row .z-row-cnt { color:black; }
DIV.z-grid-body{ overflow-x: hidden; overflow-y:auto; }
</style>
<window id="lmtInfoWindow" use="cn.microvideo.alarm.ui.LmtInfoUI "
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:n="http://www.zkoss.org/2005/zk/native"
xmlns="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<grid fixedLayout="true" id="lmtGrid" height="530px"
align="left" model="@{lmtInfoWindow.lmtList }">
<columns>
<column width="40px" />
<column label="流媒體名稱" />
<column label="流媒體IP" />
<column label="狀態" />
<column label="型別" />
<column label="是否外接儲存" />
<column label="作業系統當前時間" />
</columns>
<rows>
<row self="@{each=lmt}" align="left">
<detail open="false"
fulfill="onOpen=alarm_lmtspace.zul" />
<label value="@{lmt.lmtName}"></label>
<label value="@{lmt.lmtIp}"></label>
<label value="@{lmt.lmtState}"></label>
<label value="@{lmt.lmtType}"></label>
<label value="@{lmt.lmtIsConnectStore}"></label>
<label value="@{lmt.lmtLastVideoTime}"></label>
</row>
</rows>
</grid>
<paging></paging>
</window>
</zk>
LmtInfoUI頁面：
public class LmtInfoUI extends Window implements AfterCompose {
// 繫結器
protected AnnotateDataBinder binder;
// 前端zul頁面grid的id
private Grid lmtGrid;
// grid model屬性繫結的資料，提供get set方法
private List<AlarmLMTInfos> lmtList = new ArrayList<AlarmLMTInfos>();
@Override
public void afterCompose() {
Components.wireVariables(this, this);
Components.addForwards(this, this);
}
public void onCreate() {
binder = (AnnotateDataBinder) this.getVariable("binder", true);
onLoadLmtList();
}
// 載入使用者列表，與button元件的forward屬性繫結
public void onLoadLmtList() {
// 呼叫服務，如果與spring整合，可以使用SpringUtil.getBean("UserService");
// UserService userService = new UserServiceImpl();
lmtList = findAll();
// 更新grid，顯示資料
binder.loadComponent(lmtGrid);
// 立即顯示所有行，不延遲載入
// userlistGrid.renderAll();
}
public List<AlarmLMTInfos> findAll() {
// 僅作為演示，實際操作，訪問資料庫
List<AlarmLMTInfos> lmtList = new ArrayList<AlarmLMTInfos>();
AlarmLMTInfos lmt = null;
Random random = new Random();
for (int i = 1; i < 11; i++) {
lmt = new AlarmLMTInfos();
lmt.setLmtName("測試" + i);
lmt.setLmtIp("123.123.123.123");
lmt.setLmtState("線上");
lmt.setLmtType("定製");
lmt.setLmtIsConnectStore("是");
lmt.setLmtLastVideoTime(new Date());
lmtList.add(lmt);
}
return lmtList;
}
public List<AlarmLMTInfos> getLmtList() {
return lmtList;
}
public void setLmtList(List<AlarmLMTInfos> lmtList) {
this.lmtList = lmtList;
}
}
第二步：建立第嵌入的grid 程式碼如下：
<?page title="devices" contentType="text/html;charset=UTF-8"?>
<?variable-resolver class="cn.microvideo.alarm.ui.lmtSpaceResolver"?>
<zk>
<window>
<grid fixedLayout="true" id="lmtSpaceGrid" height="300px"
align="left" sclass="inner-grid">
<columns>
<column label="目錄" />
<column label="大小(G)" />
<column label="已用(G)" />
<column label="剩餘(G)" />
</columns>
<rows>
<row forEach="${lmtSpaceList}" align="left">
<label value="${each.lmtSpaceName}"></label>
<label value="${each.lmtSpaceSize}"></label>
<label value="${each.lmtSpaceUsed}"></label>
<label value="${each.lmtSpaceAvail}"></label>
</row>
</rows>
<foot>
<footer label="Avg1:" />
<footer label="Avg2:" />
<footer label="Avg3:" />
<footer label="Avg4:" />
</foot>
</grid>
</window>
</zk>
lmtSpaceResolver 頁面：
public class lmtSpaceResolver implements VariableResolver {
private List<AlarmLmtSpace> lmtSpaceList = new ArrayList<AlarmLmtSpace>();
private AlarmLmtSpace lmtSpace;
@Override
public Object resolveVariable(String name) throws XelException {
return "lmtSpaceList".equals(name) ? findAll() : null;
}
public List<AlarmLmtSpace> findAll() {
// 僅作為演示，實際操作，訪問資料庫
List<AlarmLmtSpace> lmtSpaceList1 = new ArrayList<AlarmLmtSpace>();
AlarmLmtSpace lmtSpace1 = null;
Random random = new Random();
for (int i = 1; i < 11; i++) {
lmtSpace1 = new AlarmLmtSpace();
lmtSpace1.setLmtSpaceName("root");
lmtSpace1.setLmtSpaceSize("121212.12121");
lmtSpace1.setLmtSpaceUsed("33232323");
lmtSpace1.setLmtSpaceAvail("1212121212.12121");
lmtSpaceList1.add(lmtSpace1);
}
return lmtSpaceList1;
}
}
還有兩個POJO類，不在這貼了。
中間碰到了兩個問題：
第一個：Not unique in ID space <LmtInfoUI lmtInfoWindow>: lmtSpaceWindow，這個問題的原因是我嵌入的grid也是按照外層grid的方式進行寫的。在嵌入的grid頁面裡對window元件的Id進行資料繫結，出現了這個錯。
第二個：是我發現第一個問題後，進行解決這個問題出現的問題，如果嵌入的grid不存在window元件Id，那麼就不會現 Not unique in ID space，去掉Id，在zul檔案頭宣告
<?variable-resolver class=""?>，單獨測試嵌入的grid的時，執行正確，不過當把該grid嵌入後，執行報錯。
Page is already covered by another Data Binder. Cannot be covered by this Data Binder again. Page
解決第二問題是用foreach方式對grid資料進行遍歷的，沒有用AnnotateDataBinder，解決這個問題後，測試成功！
參考資料：
http://books.zkoss.org/wiki/ZK_Getting_Started/Tutorial
提供下載賺點積分，沒積分了，呵呵。
http://download.csdn.net/detail/gaozhlzh/3726009