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