Wie fügen Sie einem Flextable in GWT einen Zeilenlistener hinzu?

Question

Wie fügen Sie einer bestimmten Zeile oder allen Zeilen in einer Tabelle einen Zeilenlistener hinzu? Ich muss den Zeilen einen Typ von "onMouseOver" Listener hinzufügen, so dass, wenn Sie den Mauszeiger darüber bewegen, die Hintergrundfarbe der Zeile geändert wird, ähnlich wie es bei getRowFormatter möglich ist.

Answer 1

Gesetzt GWT 1.5.3:

CLICK EVENT HANDLING

Wenn Sie FlexTable verwenden und einen Click-Ereignishandler wollten, könnten Sie die FlexTable.addTableListener() verwenden und deine eigenen TableListener registrieren. Das Objekt TableListener muss den Rückruf onCellClicked implementieren, der Ihnen die Zeilennummer geben würde.

ANDERE EVENTS HANDLING (z HOVER)

Wenn Sie andere Arten von Veranstaltungen als Klick anderen müssen zu handhaben (sagen wir, schweben), GWT zur Zeit nicht über eine Schnittstelle bereit dafür. Du bist ziemlich alleine geblieben, um sie selbst zu implementieren. Es gibt zwei Möglichkeiten, es zu tun, dass ich von jetzt denken kann:

1. Die schnelle und schmutzige Art und Weise, wahrscheinlich durch JSNI ausnutzt, die ein Mittel bereitstellt für Sie Javascript in Ihren GWT-Code zu injizieren. Ich habe nicht viel JSNI (abgesehen von wirklich harten Workarounds, die es nicht wert sind, sie in reines GWT zu schreiben) in meinem Code verwendet, so dass ich Ihnen kein Beispiel zeigen kann; Aber ehrlich gesagt werde ich das nicht empfehlen, da es 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. Rufen Sie im Konstruktor die Funktion sinkEvents mit Ihren erforderlichen Ereignissen auf. (z. B. für den Hover benötigen Sie wahrscheinlich sinkEvents (Event.ONMOUSEOVER)). Dann benötigen Sie die onBrowserEvent-Funktion, die den Mouseover behandelt.

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

   Die besten lernen, wie dies zu codieren ist, indem man die GWT-Quellcode selbst (Suche nach sinkEvent) und immer das Gefühl, wie um es auf die GWT-Art zu tun.

Answer 2

// 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 3

Ich fand es viel einfacher Javascript direkt mit dem TR-Elemente hinzuzufügen. Mein Code geht davon aus, dass ein Widgets-DOM-Elternteil ein TD ist und das Großelternteil das TR, also müssen Sie sicher sein, dass Sie Ihr DOM kennen.

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

TabelleRowElement 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 gerade diese einfache Art und Weise:

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 aus den Zellen, die Sie

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 besten Grüßen,

Zied Hamdi