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

Question

我在 Wicket 中使用 Datatables jquery 表。在java代码中，我正在使用RepeatingViews准备table 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

绑定(bind)在主复选框上的代码是:

    @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);
        }
    }

自定义复选框看起来像:

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 来做到这一点。因此，具体来说，绑定(bind)到主复选框的代码将变为:

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