Question

我正在使用ZK在Web应用程序中工作。我正在努力使用window，我需要使用用户指定的行来呈现grid。它应该是这样的：

<grid>
    <columns>
        <column width="150px"/>
        <column width="350px"/>
    </columns>
    <rows>
        <row>
            <cell>
                <label value="Rows to add"/>
            </cell>
            <cell>
                <textbox id="txt_rowamount"/>
            </cell>
        </row>
    </rows>
</grid>

<grid id="grid">
    <columns>
        <column width="100px" label="Field 1" align="center"/>
        <column width="100px" label="Field 2" align="center"/>
        <column width="100px" label="Field 3" align="center"/>
    </columns>

    <rows id="rows" forEach="${rowModelList}">
        <row>
            <cell>
                <textbox value="${each.field1}" />
            </cell>
            <cell>
                <textbox value="${each.field2}" />
            </cell>
            <cell>
                <textbox value="${each.field3}" />
            </cell>
        </row>
    </rows>
</grid>

<button id="btn_generate" label="Generate Rows"/>

因此，如果您在txt_rowamount中键入4，每个row中包含4个textbox个组件和3个row个组件。文本框应为空，当我完成每个文本框时，用户输入应绑定到每个fieldN项目的rowModel，我是否要清楚自己？

我正在作曲家尝试这样的事情：

private ListModel<RowModel> rowModelList;

@Autowired
private Grid grid;

@Override
public void doAfterCompose(final Window component) throws Exception {
    super.doAfterCompose(component);

    rowModelList = new ListModelList<>();

    grid.setVisible(false);
}

public void onClick$btn_generate() {
    // TODO Add four empty elements to rowModelList

    grid.setVisible(true);
}

RowModel喜欢

public class RowModel {

    private String field1;
    private String field2;
    private String field3;

    // ommited constructors, getters and setters

}

我认为该方法应该是 MVVM 而不是当前的 MVC ，但我不知道如何做到这一点。此外，我不知道你是否可以在同一个应用程序中混合使用这些方法，以及这样做的优点和缺点。

我看到了ZK grid demos但是所有人都在使用已经填充的对象来渲染表格，所以对我来说没用。

如果有人可以帮我解决这个问题，我们将不胜感激。如果您需要有关此问题的代码或要求的更多信息，请将其评论出来。

提前感谢您的回答。

Answer 1

你目前的尝试似乎有很多缺失，所以我会尽力填补空白。如果这里有一个不耐烦的example on zkfiddle。

由于你在谈论将组件属性绑定到模型值，我建议使用ZK的DataBinding，它很好地集成到MVVM development pattern中（对不起链接，但这不是一个单行）。

在任何情况下，该示例都说明了如何将（例如ListModelList与templates，Property- / Command-Binding）等ZK功能组合到一个简单的动态UI中。

正如您在代码中看到的那样，添加（重新）在模型中移动一行需要基本操作（网格将自动更新其子行）：

rows.add(new RowModel(...));
rows.remove(row);

由于ListModelList通过<grid>分配给@init(vm.rows)组件，因此网格将侦听对ListModel的更改并相应地添加删除网格行。它在添加到模型时使用<template name="model" var="rowModel">呈现新行。模板变量rowModel变量表示rowModel对象。（more on that in our documentation）

我希望这些信息不会让人反感......如果是这样，请告诉我。

BTW：您之前尝试使用的forEach-attribute用于静态ui合成（在zul解析时），不需要动态控制。对于动态案例，请将ListModel（List）与模板结合使用。

罗伯特

ZK如何根据用户输入添加网格

1 个答案: