Как добавить слушатель строки в Flextable в GWT?

Question

Как добавить прослушиватель строк к определенной строке или ко всем строкам в таблице? Мне нужно добавить тип слушателя «onMouseOver» к строкам, чтобы при наведении на них курсора изменился цвет фона строки, так же, как позволяет getRowFormatter.

Answer 1

// this is click 
final FlexTable myTable = new FlexTable();
myTable.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        Cell cell = myTable.getCellForEvent(event);
        int receiverRowIndex = cell.getRowIndex(); // <- here!
    }
});

Answer 2

Предположим, GWT 1.5.3:

НАЖМИТЕ ОБРАБОТКУ СОБЫТИЯМ

Если вы используете FlexTable и вам нужен обработчик события щелчка, вы можете использовать FlexTable.addTableListener() и зарегистрировать свой собственный TableListener. Объект TableListener должен будет реализовать обратный вызов onCellClicked, который даст вам номер строки.

ОБРАЩЕНИЕ С ДРУГИМИ СОБЫТИЯМИ (например, HOVER)

Если вам нужно обрабатывать события другого типа, кроме щелчка (скажем, при наведении), в GWT в настоящее время нет готового интерфейса для этого. Вы в значительной степени оставили сами, чтобы реализовать их самостоятельно. Сейчас есть два способа сделать это:

1. Быстрый и грязный способ, вероятно, заключается в использовании JSNI, который предоставляет средства для внедрения Javascript в код GWT. Я не использовал в своем коде много JSNI (кроме действительно сложных обходных путей, которые не стоят усилий для написания его на чистом GWT), поэтому я не могу показать вам пример; но, честно говоря, я не буду рекомендовать это, поскольку это снижает удобство обслуживания и расширяемость.

2. Если вам нужен собственный интерфейс GWT, вы можете создать новый класс, который наследует HTMLTable или FlexTable. В конструкторе вызовите функцию sinkEvents с необходимыми событиями. (например, для hover вам, вероятно, понадобится sinkEvents (Event.ONMOUSEOVER)). Тогда вам понадобится функция onBrowserEvent, которая обрабатывает наведение мыши.

   Быстрый шаблон того, как должен выглядеть код:

   import com.google.gwt.user.client.DOM;
   import com.google.gwt.user.client.Event;
   import com.google.gwt.user.client.ui.FlexTable;
   public class FlexTableWithHoverHandler
       extends FlexTable
   {
       public FlexTableWithHoverHandler()
       {
           super();
           sinkEvents(Event.ONMOUSEOVER);
       }
       @Override
       public void onBrowserEvent(Event event)
       {
           switch(DOM.eventGetType(event))
           {
           case Event.ONMOUSEOVER:
               // Mouse over handling code here
               break;
           default:
               break;
           }
       }
   }
   

   Лучше всего научиться кодировать это, взглянув на сам исходный код GWT (поиск sinkEvent) и понять, как это сделать способом GWT.

Answer 3

Мне было очень просто добавить javascript непосредственно к элементу TR. В моем коде предполагается, что родитель DOM виджета - это TD, а grandparent - TR, поэтому вы должны быть уверены, что знаете свой DOM.

Вот мой код. Красиво и просто, управление событиями JSNI или GWT DOM не требуется.

TableRowElement rowElement = (TableRowElement) checkbox.getElement (). GetParentElement (). GetParentElement ();

rowElement.setAttribute ("onMouseOver", "this.className = '" + importRecordsResources.css (). NormalActive () + "'");

rowElement.setAttribute ("onMouseOut", "this.className = '" + importRecordsResources.css (). Normal () + "'");

Answer 4

Я просто сделал это так просто:

protected void handleRowsSelectionStyles(ClickEvent event) {
    int selectedRowIndex = fieldTable.getCellForEvent(event).getRowIndex();
    int rowCount = fieldTable.getRowCount();
    for (int row = 0; row < rowCount; row++) {
        Element rowElem = fieldTable.getRowFormatter().getElement(row);
        rowElem.setClassName(row == selectedRowIndex ? "row selected" : "row");
    }
}

Вы вызываете этот метод из ячеек, на которые вы хотите кликнуть

int row = 0;
for (final RowDataProxy rowData : rowDataList) {
    Label fieldName = new Label(rowData.name());
    fieldName.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            handleRowsSelectionStyles(event);
        }
    });
    fieldTable.setWidget(row++, 0, fieldName);
}

С наилучшими пожеланиями,

Зиед Хамди