带有分页的数据表中的 Wicket 复选框

Question

我在 Wicket 中使用 Datatables jquery table。在 java 代码中，我准备使用 RepeatingViews table thead 和 tbody HTML 标记，然后我调用 DataTable java 脚本构造函数来创建 table 分页，排序等。

我想将复选框列添加到 table。 thead 中的主复选框（table 的标题）应切换 table.

中的所有行复选框

问题是分页，当我单击主复选框时，DOM 中不存在某些复选框，因为它们位于不同的 table 页面上。 Wicket 向我抛出这个错误：

ERROR: Wicket.Ajax.Call.processComponent: Component with id [[id187]] was not found while trying to perform markup update. Make sure you called component.setOutputMarkupId(true) on the component whose markup you are trying to update.
ERROR: Cannot bind a listener for event "change" on element "checkbox76" because the element is not in the DOM

主复选框绑定的代码是：

    @Override
    public void update(AjaxRequestTarget target, boolean state) {
        for (int i = 0; i < rowsCheckboxes.size(); i++) {
            CustomCheckbox checkbox = rowsCheckboxes.get(i);
            checkbox.setState(state);
            target.add(checkbox);
        }
    }

CustomCheckbox 看起来像：

public abstract class CustomCheckbox extends Panel {
    private static final long serialVersionUID = 1L;

    private boolean state;
    public CheckBox checkbox;

    public CustomCheckbox(String id) {
        super(id);

        checkbox = new CheckBox("checkbox", new PropertyModel<>(this, "state"));
        checkbox.add(new OnChangeAjaxBehavior() {
            private static final long serialVersionUID = 1L;

            @Override
            protected void onUpdate(AjaxRequestTarget target) {
                update(target, state);
            }
        });

        setOutputMarkupId(true);
        add(checkbox);
    }

    public abstract void update(AjaxRequestTarget target, boolean state);

    public void setState(boolean state) {
        this.state = state;
    }

}

此 CustomCheckbox 的

HTML：

<wicket:panel>
    <span class="custom-checkbox">
        <input wicket:id="checkbox" type="checkbox">
        <label for="select"></label>
    </span>
</wicket:panel>

我该如何解决这个问题？我想用主复选框切换位于当前 table 页面上的所有复选框，该页面现在显示给用户。

我已经试过了，但没有成功：

setOutputMarkupId(true);
setOutputMarkupPlaceholderTag(true);

我使用这些复选框来克隆或删除 table 项。

感谢您的回答。

Answer 1

我认为使用一些 javascript 代码更新您的复选框可能会有所帮助，而不是通过 ajax 刷新它们，即将它们添加到 AjaxRequestTarget。我不了解 Datatables 的细节，但我认为你可以使用它的 API 来做到这一点。所以具体来说，绑定到主复选框的代码将变为：

@Override
public void update(AjaxRequestTarget target, boolean state) {
   for (int i = 0; i < rowsCheckboxes.size(); i++) {
      CustomCheckbox checkbox = rowsCheckboxes.get(i);
      checkbox.setState(state);            
   }
   String setStateAllCheck = "your script code to select/unselect all checkboxes";
   target.prependJavaScript()
}

带有分页的数据表中的 Wicket 复选框

Wicket Checkboxes in datatable with pagination

java

checkbox

wicket

datatables

jakarta-ee