GWT 2.4 DataGrid automatisches Scrollen beim Auswählen eines Elements

7

Ich verwende GWT 2.4's neues DataGrid in einem Projekt. Ich habe das DataGrid mit einer Seitengröße von 50 konfiguriert.
Der verfügbare Bildschirm ist nicht groß genug, um alle Elemente anzuzeigen, und daher wird eine vertikale Bildlaufleiste angezeigt (dies ist eigentlich der Hauptzweck für die Verwendung eines DataGrids an erster Stelle).
Ich habe ein SingleSelectionModel an das DataGrid angehängt, um Objekte auswählen zu können.
Das funktioniert soweit gut.

Ich habe jedoch auch ein anderes Widget, mit dem der Benutzer interagieren kann. Basierend auf dieser Benutzeraktion sollte ein Element aus dem DataGrid ausgewählt werden.
Manchmal befindet sich das ausgewählte Element nicht im sichtbaren Bildschirmbereich und der Benutzer muss im DataGrid nach unten scrollen, um es anzuzeigen.
Gibt es eine Möglichkeit, automatisch oder manuell nach unten zu scrollen, so dass das ausgewählte Objekt sichtbar ist?
Ich habe die JavaDocs überprüft des DataGrid und fand dafür keine geeignete Methode oder Funktion.

    
Ümit 28.09.2011, 11:46
quelle

6 Antworten

9

Weiß nicht, ob das funktioniert, aber Sie könnten versuchen, das Zeilenelement für die Auswahl zu erhalten und die scrollIntoView-Methode zu verwenden.

Beispielcode:

%Vor%     
ocaner 28.09.2011, 19:32
quelle
6

Die obige Antwort funktioniert ziemlich gut. Wenn das Raster jedoch breiter als Ihr Fenster ist und eine horizontale Bildlaufleiste hat, scrollt es auch ganz nach rechts, was ziemlich nervig ist. Ich war in der Lage, zu scrollen und nach links zu scrollen, indem ich die erste Zelle in der ausgewählten Zeile abrollte und sie dann in die Ansicht scrollen ließ.

%Vor%     
Kern 17.02.2012 21:11
quelle
2

Haben Sie keine Zeit, es auszuprobieren, aber DataGrid implementiert die Schnittstelle HasRows, und HasRows hat unter anderem eine Methode namens setVisibleRange. Sie müssen nur die Zeilennummer des Elements ermitteln, auf das Sie sich konzentrieren möchten, und dann den sichtbaren Bereich von dieser Zahl n auf n + 50 festlegen. Auf diese Weise wird das DataGrid zurückgesetzt, um dieses Element an die Spitze zu stellen (oder nahe an der Spitze, wenn es sich in den letzten 50 Elementen der Liste befindet, die das DataGrid unterstützt). Vergessen Sie nicht, Ihr DataGrid neu zu zeichnen.

Haben Sie sich das schon angesehen? Wenn ja, wäre ich überrascht, dass es nicht funktioniert hat.

Oh, und da dies ein Widget ist, das mit einem anderen kommuniziert, haben Sie wahrscheinlich einige Nachrichten eingerichtet und einige Nachrichtenhandler, so dass wenn der Benutzer mit diesem zweiten Widget interagiert und das Objekt "auswählt", die Nachricht auf dem EventBus und Ein Handler für diese Nachricht repariert das DataGrid in den von mir beschriebenen Zeilen. Ich denke, du musst diese Verkabelung selbst machen.

    
Steve J 28.09.2011 16:00
quelle
1

Meine Lösung, ein bisschen besser:

%Vor%     
jordiburgos 23.11.2012 12:54
quelle
1

Ich habe eine Out-of-bounds-Ausnahme, die das oben genannte macht.

Ich habe es gelöst, indem ich das ScrollPanel im DataGrid bekommen und .scrollToTop () usw. im ScrollPanel benutzt habe. Um auf das ScrollPanel im DataGrid zugreifen zu können, musste ich diesen Kommentar verwenden: Ссылка

    
AndreasS 22.08.2013 14:26
quelle
0

Wie Kem gesagt hat, nervt es den "scrollToRight" -Effekt nach scrollIntoView. Nach mir gibt Kems Lösung ein besseres Verhalten als die Basis, da normalerweise die ersten Spalten in einer Tabelle umso aussagekräftiger sind. Ich habe seinen Ansatz etwas verbessert, indem ich horizontal zur ersten Spalte der Zeile blättere, in der wir sichtbar sein wollen, indem wir die erste sichtbare Spalte auf der linken Seite berechnen, bevor wir die Bildlaufleiste anwenden und dann zu ihr scrollen.

Eine letzte Anmerkung: Spalten absolut links wird gegen "51" getestet. Dies ist ein Wert, den ich "experimentell" gefunden habe, indem ich die JS-Werte im Entwickler-Tool des Browsers angeschaut habe. Ich denke, das hängt vom Stil der Tabelle ab, die Sie möglicherweise ändern / berechnen müssen.

Unterhalb des Codes:

%Vor%     
avalori 12.02.2016 12:46
quelle