0

我正在使用 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"/>

所以，如果你在一个有 4 个组件和每个3 个组件txt_rowamount的网格中键入 4 。文本框应该是空的，当我完成每个文本框时，用户输入应该绑定到每个项目，我是否让自己清楚？rowtextboxrowfieldNrowModel

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

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 网格演示，但它们都使用已经填充的对象来呈现表格，所以它对我没有用。

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

提前感谢您的回答。

4

1 回答 1

1

您当前的尝试似乎缺少很多内容，因此我将尝试填补空白。如果不耐烦，这里有一个zkfiddle 上的可运​​行示例。

由于您在谈论将组件属性绑定到模型值，我建议使用 ZK 的 DataBinding，它很好地集成到MVVM 开发模式中（抱歉链接，但这不是单行的）。

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

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

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

由于 ListModelList 通过 分配给<grid>组件@init(vm.rows)，网格将监听 ListModel 的更改并相应地添加删除网格行。<template name="model" var="rowModel">添加到模型时，它使用来呈现新行。模板变量rowModel变量代表 rowModel 对象。（更多关于我们的文档）

我希望这些信息不是压倒性的……如果是这样，请告诉我。

顺便说一句：您之前尝试使用的forEach 属性用于不需要动态控制的静态 ui 组合（在 zul 解析时）。对于动态案例，将 ListModel(List) 与模板结合使用。

罗伯特

于 2018-03-15T03:49:43.503 回答