Wie fügen Sie eine Zeile Listener zu einem Flextable in GWT?

Question

Wie fügen Sie einen Zeilen-Listener zu einer bestimmten Zeile oder zu allen Zeilen in einer Tabelle hinzu? Ich muss eine Art "onMouseOver"-Listener zu den Zeilen hinzufügen, so dass, wenn Sie mit dem Mauszeiger über sie, es ändert sich die Hintergrundfarbe der Zeile, ähnlich wie getRowFormatter können Sie zu tun.

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

Angenommen, GWT 1.5.3:

KLICK-EREIGNISBEHANDLUNG

Wenn Sie Folgendes verwenden FlexTable und Sie wollten einen Click-Event-Handler, könnten Sie die FlexTable.addTableListener() und registrieren Sie Ihre eigene TableListener . は、その TableListener Objekt muss die Funktion onCellClicked Callback, der Ihnen die Zeilennummer liefert.

HANDHABUNG ANDERER EREIGNISSE (z. B. HOVER)

Wenn Sie brauchen, um andere Art von Ereignissen als Klick (sagen wir, Hover) zu behandeln, GWT derzeit nicht über eine fertige Schnittstelle für das. Sie ziemlich viel links auf eigene Faust, sie selbst zu implementieren. Es gibt zwei Möglichkeiten, es zu tun, die ich jetzt denken kann:

1. Der schnelle und schmutzige Weg ist wahrscheinlich durch die Nutzung von JSNI, die ein Mittel für Sie, um Javascript in Ihrem GWT-Code injizieren bietet. Ich habe nicht viel JSNI (abgesehen von wirklich harten Workarounds, die den Aufwand nicht wert ist, es in reinem GWT zu schreiben) in meinem Code verwendet, so dass ich Ihnen kein Beispiel zeigen kann; aber offen gesagt werde ich dies nicht empfehlen, da es die Wartbarkeit und Erweiterbarkeit reduziert.

2. Wenn Sie eine native GWT-Schnittstelle wünschen, können Sie eine neue Klasse erstellen, die HTMLTable oder FlexTable erbt. Im Konstruktor rufen Sie die sinkEvents Funktion mit den gewünschten Ereignissen. (z.B. für hover, benötigen Sie wahrscheinlich sinkEvents(Event.ONMOUSEOVER)). Dann benötigen Sie die Funktion onBrowserEvent, die das Mouseover behandelt.

   Eine kurze Vorlage, wie der Code aussehen sollte:

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

   Am besten lernt man das, indem man sich den GWT-Quellcode selbst ansieht (suchen Sie nach sinkEvent ) und ein Gefühl dafür zu bekommen, wie man es auf GWT-Art macht.

Answer 3

Ich fand es viel einfacher, Javascript direkt in das TR-Element einzufügen. Mein Code geht davon aus, dass ein Widgets DOM-Elternteil ist ein TD und der Großelternteil ist die TR so müssen Sie sicher sein, dass Sie Ihre DOM kennen.

Hier ist mein Code. Schön und einfach, keine JSNI oder GWT DOM-Ereignis-Management erforderlich.

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

Ich habe es auf diese einfache Weise gemacht:

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

Sie rufen diese Methode von den Zellen aus auf, die anklickbar sein sollen

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

Mit freundlichen Grüßen,

Zied Hamdi