java - Wicket:用自定义内容动态填充单元格

Question

我使用 wicket ListViews 制作了一个表格来创建列和行，代码如下所示:

ErhebungMatrixPanel.java

public ErhebungMatrixPanel(String id) {
    super(id);
    this.add(matrixForm);
    matrixForm.add(new ListView<Zustaendigkeit>("columns", zustaendigkeiten){
        private static final long serialVersionUID = 1L;

        @Override
        protected void populateItem(ListItem<Zustaendigkeit> item) {
            final int index = item.getIndex();
            item.add(new Label("zustLabel", zustaendigkeiten.get(index).getName().toString()));
        }
    });

    matrixForm.add(rows = new ListView<Erhebung>("rows", erhebungen){
        private static final long serialVersionUID = 1L;

        @Override
        protected void populateItem(ListItem<Erhebung> item) {
            final IModel<Boolean> checked = Model.of(Boolean.FALSE);
            final int index = item.getIndex();
            item.add(new Label("erhebungLabel", erhebungen.get(index).getName()));

            item.add(new AjaxCheckBox("check", checked) {
                private static final long serialVersionUID = 1L;

                @Override
                protected void onUpdate(AjaxRequestTarget target) {
                    //TODO
                }
            });
        }
    });
}

在此表中，我想将 AjaxCheckBox 放入每个单元格中，以创建类似授权矩阵的内容，现在的问题是，因为列表zustaendigkeiten的长度最有时可能会变大，以至于我无法插入静态数量的复选框。现在，表格中只有一列被复选框覆盖。响应的 .html 文件如下所示:

<wicket:panel>
    <form wicket:id="matrixForm">
        <table class="matrix">
            <thead>
                <tr class="headers">
                    <th></th>
                    <span wicket:id="columns">
                        <th wicket:id="zustLabel"></th>
                    </span>
                </tr>
            </thead>
            <tbody>
                <tr wicket:id="rows">
                    <th wicket:id="erhebungLabel"></th>
                    <td><input wicket:id="check" type="checkbox" /></td>
                </tr>
            </tbody>
        </table>
    </form>
</wicket:panel>

类似这样的事情:

<tbody>
<tr wicket:id="rows">
    <th wicket:id="erhebungLabel"></th>
    <td><input wicket:id="check" type="checkbox" /></td>
    <td><input wicket:id="check" type="checkbox" /></td>
    <td><input wicket:id="check" type="checkbox" /></td>                
</tr>
</tbody>

显然不行，因为 1. 它应该是动态的，但我猜 JS 可以帮忙，2. Wicket 会抛出一个标记错误。

是否有任何类似 newCellItem 的方法可以像 DataTable 中那样使用？

Answer 1

您需要这样的东西吗？

HTML:

<form>
    <table>
        <tr>
            <th></th>
            <th wicket:id="headerList"><span wicket:id="name"></span></th>
        </tr>
        <tr wicket:id="rowList">
            <td wicket:id="name"></td>
            <td wicket:id="cellList">
                <input type="checkbox" wicket:id="checkbox"/>
            </td>
        </tr>
    </table>
</form>

Java:

add(new ListView<User>("headerList", new PropertyModel<>(this, "users")) {
    @Override
    protected void populateItem(ListItem<User> listItem) {
        listItem.add(new Label("name", new PropertyModel(listItem.getModelObject(), "name")));
    }
});

add(new ListView<String>("rowList", new PropertyModel<>(this, "roles")) {

    @Override
    protected void populateItem(ListItem<String> listItem) {
        final String role = listItem.getModelObject();

        listItem.add(new Label("name", role));

        listItem.add(new ListView<User>("cellList", new PropertyModel<>(TestPage.this, "users")) {

            @Override
            protected void populateItem(ListItem<User> listItem) {
                final User user = listItem.getModelObject();

                listItem.add(new AjaxCheckBox("checkbox", new IModel<Boolean>() {

                    @Override
                    public Boolean getObject() {
                        return user.getRoles().contains(role);
                    }

                    @Override
                    public void setObject(Boolean aBoolean) {
                        if (aBoolean) {
                            user.getRoles().add(role);
                        } else {
                            user.getRoles().remove(role);
                        }
                    }

                    @Override
                    public void detach() {

                    }
                }) {

                    @Override
                    protected void onUpdate(AjaxRequestTarget ajaxRequestTarget) {

                    }
                });
            }
        });
    }
});