ZK框架：如何根据用户输入动态生成绑定RowModel的Grid组件

没问题，我帮你搞定这个ZK框架下的动态Grid需求！下面是具体的实现步骤和代码示例，完全贴合你的需求：

1. 先定义你的RowModel类 #

首先确保你的RowModel有对应的field1、field2、field3字段及getter/setter：

public class RowModel {
    private String field1;
    private String field2;
    private String field3;

    // Getters & Setters
    public String getField1() { return field1; }
    public void setField1(String field1) { this.field1 = field1; }
    public String getField2() { return field2; }
    public void setField2(String field2) { this.field2 = field2; }
    public String getField3() { return field3; }
    public void setField3(String field3) { this.field3 = field3; }
}

2. 编写ZUL页面 #

页面里放输入框和一个容器用来承载动态生成的Grid：

<window title="动态Grid演示" border="normal" apply="com.yourpackage.DynamicGridComposer">
    <vlayout spacing="10px">
        <label value="请输入行数："/>
        <textbox id="txt_rowamount" placeholder="比如4" onChange="@command('generateGrid')"/>
        <div id="gridContainer" style="margin-top:15px;"/>
    </vlayout>
</window>

3. 实现Composer逻辑 #

这部分是核心，负责监听输入、动态创建Grid并绑定数据：

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.*;

import java.util.ArrayList;
import java.util.List;

public class DynamicGridComposer extends SelectorComposer<Component> {
    @Wire
    private Textbox txt_rowamount;
    @Wire
    private Div gridContainer;

    // 存储所有行的数据模型
    private List<RowModel> rowDataList = new ArrayList<>();

    @Listen("onChange = #txt_rowamount")
    public void generateDynamicGrid() {
        // 先清空容器和数据列表，避免重复生成
        gridContainer.getChildren().clear();
        rowDataList.clear();

        try {
            int rowCount = Integer.parseInt(txt_rowamount.getValue().trim());
            if (rowCount <= 0) {
                Messagebox.show("请输入大于0的有效数字！");
                return;
            }

            // 创建Grid组件
            Grid dynamicGrid = new Grid();
            dynamicGrid.setWidth("100%");
            dynamicGrid.setStyle("border:1px solid #ddd;");

            // 创建列头
            Columns columns = new Columns();
            columns.appendChild(new Column("字段1", "center"));
            columns.appendChild(new Column("字段2", "center"));
            columns.appendChild(new Column("字段3", "center"));
            dynamicGrid.appendChild(columns);

            // 创建行容器
            Rows rows = new Rows();
            dynamicGrid.appendChild(rows);

            // 循环生成指定行数的行和文本框
            for (int i = 0; i < rowCount; i++) {
                // 初始化当前行的数据模型
                RowModel currentRow = new RowModel();
                rowDataList.add(currentRow);

                // 创建行
                Row row = new Row();
                rows.appendChild(row);

                // 第一个文本框，绑定field1
                Textbox tbField1 = new Textbox();
                tbField1.setWidth("90%");
                tbField1.addEventListener("onChange", e -> {
                    currentRow.setField1(tbField1.getValue());
                    // 这里可以加输入验证逻辑，比如检查非空等
                });
                row.appendChild(tbField1);

                // 第二个文本框，绑定field2
                Textbox tbField2 = new Textbox();
                tbField2.setWidth("90%");
                tbField2.addEventListener("onChange", e -> {
                    currentRow.setField2(tbField2.getValue());
                });
                row.appendChild(tbField2);

                // 第三个文本框，绑定field3
                Textbox tbField3 = new Textbox();
                tbField3.setWidth("90%");
                tbField3.addEventListener("onChange", e -> {
                    currentRow.setField3(tbField3.getValue());
                });
                row.appendChild(tbField3);
            }

            // 将生成的Grid添加到页面容器中
            gridContainer.appendChild(dynamicGrid);

        } catch (NumberFormatException e) {
            Messagebox.show("请输入有效的数字！");
        }
    }

    // 如果你需要获取所有输入的数据，可以调用这个方法
    public List<RowModel> getRowDataList() {
        return rowDataList;
    }
}

关键逻辑说明 #

• 事件触发：监听输入框的onChange事件，用户输入完成后自动触发Grid生成。
• 动态组件创建：通过Java代码逐个创建Grid、列、行和文本框，确保结构正确。
• 数据绑定：每个文本框的onChange事件都会把输入值同步到对应的RowModel对象，这样用户输入的内容会实时保存到模型中。
• 异常处理：处理用户输入非数字或无效数值的情况，用Messagebox给出友好提示。

内容的提问来源于stack exchange，提问作者Alvaro Pedraza