Wie man den Header des girdview einfriert [Gridview und Spaltenbreite sind nicht festgelegt]

8

Ich implementiere GridView Freeze Header mit vertikaler Bildlaufleiste. Ich habe viele Lösungen ausprobiert, die hier vorgeschlagen wurden. Aber die Probleme sind,

  1. Die Gridview befindet sich in einem Panel, dessen Breite nicht festgelegt ist. Seine 97%.

2. Die Spalten haben keine feste Breite.

Ich habe versucht, die Lösung in GridviewScroll.js vorgeschlagen, aber das Problem ist mit fester Breite und Gridview nicht die Größe der Fenstergröße entsprechend.

Ich habe zu viele Lösungen versucht, aber ohne feste Breite funktioniert das nicht, daher kann ich das hier nicht vorstellen.

Unten ist mein bestehender Code

%Vor%

Irgendwelche Vorschläge?

    
Vani 22.03.2017, 15:06
quelle

2 Antworten

0

Ich würde DataTables verwenden. Abgesehen davon, was Sie wollen (so weit ich Ihre Anforderungen verstehe), ist es reif, stabil und zu viel mehr fähig.

Ich habe ein JsFiddle erstellt, um Folgendes zu demonstrieren: Ссылка

In der Fiddle: Der Header ist mit vertikalem Scrollen des Inhalts fixiert; keine angegebenen Spaltengrößen (sie werden die Größe ändern, wenn Sie den mittleren Teiler (der Fiddle) nach links oder rechts ziehen, und die Tabelle wird von div umgeben, das auf 97% der Seitenbreite gesetzt ist (was aus dem Speicher ist) Ein Panel wird gerendert wie in ASP.Net) und Paging ist eingeschaltet.

Hier ist das gleiche Beispiel wie ein Code-Snippet:

%Vor% %Vor%

Wenn Sie ASP.Net anweisen, eine statische ID zu verwenden: <asp:GridView ID="GridView_Vehicle" ClientIDMode="static" ... , dann sollten Sie in der Lage sein, auf Ihre Tabelle als $('#GridView_Vehicle').DataTable({ ... });

zu verweisen     
K Scandrett 31.03.2017 10:02
quelle
0

Hier ist eine Lösung für ein Raster mit einer moderaten Anzahl von Zeilen (und wenn Sie mehr als das haben, möchten Sie möglicherweise kleinere Paging statt Blättern):

Erstellen Sie zwei GridView-Elemente mit derselben Spezifikation und Datenquelle, mit der Ausnahme, dass die zweite ShowHeader="false" hat. Setzen Sie das erste Element in ein div mit style="height: 38px; overflow: hidden" (Sie müssen möglicherweise die Höhe basierend auf der für die Kopfzeile verwendeten Schriftart anpassen). Setzen Sie die zweite in ein div mit style="max-height: 400px; overflow: auto" (passen Sie die Höhe an, basierend auf der Anzahl der Zeilen, die Sie anzeigen möchten). Da beide Tabellen die gleichen Daten verwenden, sollten sie richtig ausgerichtet sein, und die zweite Tabelle ist scrollbar. Wenn Sie die Sortierung aktivieren möchten, tun Sie dies auf dem Server für die freigegebene Datenquelle und legen Sie das zweite GridView in ein UpdatePanel mit einem AsyncPostBackTrigger, der auf das erste verweist. Hier ist der Code für Ihr Beispiel:

%Vor%     
johnm 30.06.2017 20:25
quelle