使用Wicket框架创建行列数可变的动态表格

1. 基础数据模型定义 #

首先定义Engine实体类，存储ID和对应的版本列表：

import java.util.List;

public class Engine {
    // 唯一ID
    private String engineId;
    // 数量不固定的版本号列表
    private List<String> versions;

    // 构造方法、getter、setter
    public Engine(String engineId, List<String> versions) {
        this.engineId = engineId;
        this.versions = versions;
    }

    public String getEngineId() { return engineId; }
    public void setEngineId(String engineId) { this.engineId = engineId; }
    public List<String> getVersions() { return versions; }
    public void setVersions(List<String> versions) { this.versions = versions; }
}

2. Java页面逻辑代码 #

页面类中嵌套两层ListView，外层遍历Engine列表，内层遍历单个Engine的版本列表：

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import java.util.List;

public class EngineTablePage extends WebPage {
    public EngineTablePage() {
        // 这里替换为你自己动态生成的Engine列表数据
        List<Engine> engineList = getDynamicEngineList();

        // 外层ListView：遍历所有Engine对象
        add(new ListView<Engine>("engineList", engineList) {
            @Override
            protected void populateItem(ListItem<Engine> item) {
                Engine currentEngine = item.getModelObject();
                // 绑定Engine唯一ID
                item.add(new Label("engineId", currentEngine.getEngineId()));

                // 内层ListView：遍历当前Engine的所有版本号
                ListView<String> versionListView = new ListView<String>("versionList", currentEngine.getVersions()) {
                    @Override
                    protected void populateItem(ListItem<String> versionItem) {
                        // 绑定单个版本号，需要交互的话可以替换为Link等组件
                        versionItem.add(new Label("version", versionItem.getModelObject()));
                    }
                };
                item.add(versionListView);
            }
        });
    }

    // 模拟动态生成Engine列表的方法，替换为你自己的业务逻辑
    private List<Engine> getDynamicEngineList() {
        // 示例数据，实际从你的业务逻辑中获取
        return List.of(
                new Engine("ENG-001", List.of("v1.0", "v1.1", "v2.0")),
                new Engine("ENG-002", List.of("v1.0")),
                new Engine("ENG-003", List.of("v2.1", "v2.2", "v3.0", "v3.1"))
        );
    }
}

3. 对应的HTML模板代码 #

模板文件和Java页面类同名、路径保持一致，组件wicket:id和Java代码中绑定的id完全对应：

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta charset="UTF-8">
    <title>Engine版本信息表</title>
    <style>
        table {border-collapse: collapse; width: 600px;}
        th, td {border: 1px solid #ccc; padding: 8px; text-align: left;}
    </style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Engine唯一ID</th>
            <th>关联版本号</th>
        </tr>
    </thead>
    <tbody>
        <!-- 外层ListView对应的行，遍历所有Engine -->
        <tr wicket:id="engineList">
            <td wicket:id="engineId"></td>
            <td>
                <!-- 内层ListView对应的容器，遍历当前Engine的所有版本 -->
                <span wicket:id="versionList" style="margin-right: 10px;">
                    <span wicket:id="version"></span>
                </span>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

补充说明 #

• 如果需要每个版本号单独占一行，调整HTML结构即可，把内层ListView放在<tr>层级实现跨行展示
• 内层组件可以根据业务需求替换为链接、按钮、输入框等任意Wicket组件，无需调整ListView的嵌套逻辑
• 若版本数量较多需要换行，直接给版本标签添加display: inline-block的CSS样式即可自动适配

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