Comment voulez-vous ajouter une ligne auditeur à un Flextable dans GWT?

Comment voulez-vous ajouter une ligne auditeur à une ligne spécifique, ou toutes les lignes dans une table? J'ai besoin d'ajouter un type de "onMouseOver" port d'écoute pour les lignes de sorte que lorsque vous passez la souris au-dessus d'eux, il change la couleur de fond de la ligne, à l'instar de getRowFormatter vous permettront de le faire.

OriginalL'auteur Organiccat | 2009-03-27

css gwt

5

Supposant GWT 1.5.3:

CLIQUEZ SUR GESTION DES ÉVÉNEMENTS

Si vous utilisez FlexTable et que vous vouliez un gestionnaire d'événements click, vous pouvez utiliser le FlexTable.addTableListener() et d'enregistrer votre propre TableListener. Le TableListener objet aurez besoin pour mettre en œuvre les onCellClicked de rappel qui vous donne le numéro de ligne.

D'AUTRES ÉVÉNEMENTS de MANIPULATION (p. ex. HOVER)

Si vous avez besoin de gérer d'autres types de manifestations autres que la souris (dire, pointage), GWT ne dispose pas actuellement d'un prêt de l'interface. Vous avez assez bien à gauche sur votre propre pour les mettre en œuvre vous-même. Il y a deux façons de le faire que je peux penser maintenant:
1. La façon rapide et sale, c'est probablement par l'exploitation de JSNI, ce qui fournit un moyen pour vous d'injecter du code Javascript dans votre code GWT. Je n'ai pas utilisé beaucoup JSNI (en dehors de vraiment dur de solutions de contournement qui ne vaut pas l'effort de l'écrire dans le plus pur GWT) dans mon code donc je ne peux pas vous montrer un exemple; mais, franchement, je ne le recommande pas, car elle réduit la maintenabilité et de l'extensibilité.
2. Si vous vouliez à l'origine d'un interface GWT, vous pouvez créer une nouvelle classe qui hérite de HTMLTable ou FlexTable. Dans le constructeur, appelez le sinkEvents fonction de votre besoin événements. (par exemple, pour planer, vous aurez probablement besoin sinkEvents(Événement.ONMOUSEOVER)). Ensuite, vous aurez besoin de la onBrowserEvent fonction qui gère le passage de la souris.
  
  Rapidement un modèle de la façon dont le code devrait ressembler à:
```
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;
        }
    }
}
```
  Le meilleur d'apprendre à coder c'est en regardant le GWT code source lui-même (recherche de sinkEvent) et de se sentir sur la façon de faire les GWT.
Comment voulez-vous trouver la ligne de la cellule qui planait au-dessus? Je peux trouver de la cellule, tout simplement pas comment appliquer la ligne formateur à la ligne qui contient la cellule.
Je l'ai, j'ai oublié de référence de la table, a été d'essayer de tirer de la table parent de la cellule, oups :p

OriginalL'auteur Seh Hui Leong

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

le changement "usersTable" à "matable" et vous avez une belle solution.

OriginalL'auteur Nikolay

1

Je l'ai trouvé beaucoup plus simple pour ajouter du code javascript directement à l'élément TR. Mon code suppose que les widgets DOM parent est un TD et le grand-parent est le TR de sorte que vous devez être sûr que vous savez que votre DOM.

Voici mon code. Agréable et simple, sans JSNI ou GWT DOM gestion d'événements requis.

TableRowElement rowElement = (TableRowElement) case à cocher.getElement().getParentElement().getParentElement();

rowElement.setAttribute("onMouseOver", "cette.className='" + importRecordsResources.css().normalActive() + "'");

rowElement.setAttribute("onMouseOut", "cette.className='" + importRecordsResources.css().normal() + "'");

Je recommande fortement à l'encontre de la définition des attributs directement. GWT gestionnaires sont beaucoup plus propres à mettre en œuvre.
Mieux d'apprendre à GWT et UiBinder à effet de levier cadre.

OriginalL'auteur Steve Buikhuizen

Je l'ai juste fait cette façon simple:

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

Vous appelez cette méthode de cellules que vous souhaitez être cliquable

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

Cordialement,

Zied Hamdi

OriginalL'auteur Zied Hamdi

Vous devez vous connecter pour publier un commentaire.