Чекбоксы в калитке с датой нумерации - PullRequest
Новая
       29

Чекбоксы в калитке с датой нумерации

0 голосов
/ 31 октября 2019

Я использую таблицу данных Datatables в Wicket. В Java-коде я готовлю с помощью RepeatingViews HTML-теги thead и tbody таблицы, а затем вызываю конструктор 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;
    }

}

HTML этогоCustomCheckbox: 

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

Как я могу подойти к этой проблеме? Я хотел бы установить с помощью основного флажка все флажки, расположенные на текущей странице таблицы, которая отображается пользователю прямо сейчас.

Я пробовал это, но безуспешно: 

setOutputMarkupId(true);
setOutputMarkupPlaceholderTag(true);

Эти флажки IЯ использую для клонирования или удаления элементов таблицы.

Спасибо за любой ответ.

1 Ответ

1 голос
/ 04 ноября 2019

Я думаю, что может быть полезно обновить ваши флажки, используя некоторый код 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()
}
...