Обработка onClick для флажка в заголовке CellTable - PullRequest
Новая
       18

Обработка onClick для флажка в заголовке CellTable

6 голосов
/ 12 января 2012

Я пытаюсь создать CellTable, в котором есть столбец с некоторым текстом и флажок, который будет использоваться в качестве флажка выбора всех (см. Рисунок ниже, флажок «cb» - это флажок). В настоящее время я использую класс, производный от Header, и переопределяю его метод render для вывода текста и флажка. Я переопределяю onBrowserEvent (), однако он только дает мне события onChange, которые будут работать нормально, за исключением того, что флажок не работает правильно. У кого-нибудь есть идеи по этому поводу? 

+-------+------------+
| col 1 | Select All |
|       |     cb     | 
+-------+------------+
| row 1 |     cb     |
+-------+------------+

Проблемы, с которыми я сталкиваюсь при установке флажка, заключаются в том, что когда он не установлен, необходимо дважды щелкнуть его, чтобы появился флажок (по крайней мере, в Chrome), даже если его свойство «флажок» имеет значение true в первый раз. Один клик снимает флажок правильно.

Вот код:

Настройка столбцов CellTable: 

/** Setup the table's columns. */
private void setupTableColumns() {
    // Add the first column:
    TextColumn<MyObject> column1 = new TextColumn<MyObject>() {
        @Override
        public String getValue(final MyObject object) {
            return object.getColumn1Text();
        }
    };
    table.addColumn(macColumn, SafeHtmlUtils.fromSafeConstant("Column1"));

    // the checkbox column for selecting the lease
    Column<MyObject, Boolean> checkColumn = new Column<MyObject, Boolean>(
            new CheckboxCell(true, false)) {
        @Override
        public Boolean getValue(final MyObject object) {
            return selectionModel.isSelected(object);
        }
    };

    SelectAllHeader selectAll = new SelectAllHeader();
    selectAll.setSelectAllHandler(new SelectHandler());
    table.addColumn(checkColumn, selectAll);
}

My Select All Header: 

public static class SelectAllHeader extends Header<Boolean> {
    private final String checkboxID = "selectAllCheckbox";
    private ISelectAllHandler handler = null;

    @Override
    public void render(final Context context, final SafeHtmlBuilder sb) {
        String html = "<div>Select All<div><input type=\"checkbox\" id=\"" + checkboxID + "\"/>";

        sb.appendHtmlConstant(html);
    }

    private final Boolean allSelected;

    public SelectAllHeader() {
        super(new CheckboxCell());

        allSelected = false;
    }

    @Override
    public Boolean getValue() {
        Element checkboxElem = DOM.getElementById(checkboxID);

        return checkboxElem.getPropertyBoolean("checked");

    }

    @Override
    public void onBrowserEvent(final Context context, final Element element, final NativeEvent event) {
        Event evt = Event.as(event);
        int eventType = evt.getTypeInt();

        super.onBrowserEvent(context, element, event);

        switch (eventType) {
            case Event.ONCHANGE:
                handler.onSelectAllClicked(getValue());
                event.preventDefault();
                break;

            default:
                break;
        }

    }


    public void setSelectAllHandler(final ISelectAllHandler handler) {
        this.handler = handler;
    }

}

1 Ответ

7 голосов
/ 18 апреля 2012

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

Попробуйте сохранить проверенное состояние и отобразитьчекбокс с гос.Похоже, что вы на полпути с allSelected, вы просто не используете его.

РЕДАКТИРОВАТЬ Вот рабочая реализация, которую я только что написал для Zanata (см. SearchResultsView.java ).Интерфейс HasValue реализован таким образом, что события изменения значений могут обрабатываться стандартным способом.Я не переопределил метод рендеринга, если вы хотите сделать это, убедитесь, что вы используете getValue(), чтобы определить, будете ли вы отображать флажок установлен или не отмечен.Логика выбора / отмены выбора обрабатывается в связанном классе презентатора (см. SearchResultsPresenter.java ). 

private class CheckboxHeader extends Header<Boolean> implements HasValue<Boolean> {

   private boolean checked;
   private HandlerManager handlerManager;

   public CheckboxHeader()
   {
      //TODO consider custom cell with text
      super(new CheckboxCell());
      checked = false;
   }

   // This method is invoked to pass the value to the CheckboxCell's render method
   @Override
   public Boolean getValue()
   {
      return checked;
   }

   @Override
   public void onBrowserEvent(Context context, Element elem, NativeEvent nativeEvent)
   {
      int eventType = Event.as(nativeEvent).getTypeInt();
      if (eventType == Event.ONCHANGE)
      {
         nativeEvent.preventDefault();
         //use value setter to easily fire change event to handlers
         setValue(!checked, true);
      }
   }

   @Override
   public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Boolean> handler)
   {
      return ensureHandlerManager().addHandler(ValueChangeEvent.getType(), handler);
   }

   @Override
   public void fireEvent(GwtEvent<?> event)
   {
      ensureHandlerManager().fireEvent(event);
   }

   @Override
   public void setValue(Boolean value)
   {
      checked = value;
   }

   @Override
   public void setValue(Boolean value, boolean fireEvents)
   {
      checked = value;
      if (fireEvents)
      {
         ValueChangeEvent.fire(this, value);
      }
   }

   private HandlerManager ensureHandlerManager()
   {
      if (handlerManager == null)
      {
         handlerManager = new HandlerManager(this);
      }
      return handlerManager;
   }
}
...