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

Question

我在 Wicket 中使用 Datatables jquery 表。在 java 代码中，我正在使用 RepeatingViews 准备表格 thead 和 tbody HTML 标签，然后我调用 DataTable javascript 构造函数来创建具有分页、排序等功能的表格。

我想将复选框列添加到表格中。 thead（表格标题）中的主复选框应切换表格中的所有行复选框。

问题是分页，当我点击主复选框时，DOM中不存在某些复选框，因为它们位于不同的表格页面上。 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>

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

我试过这个，但没有成功：

setOutputMarkupId(true);
setOutputMarkupPlaceholderTag(true);

这些复选框用于克隆或删除表格项。

感谢您的任何回答。

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()
}