忙了一天终于把这个问题搞定了,虽然有点累,不过心里很兴奋,呵呵!
进入正题!
问题: 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