Winkelförmiger Tabellenkopffehler
Dies ist eine Fortsetzung meines vorherigen Beitrags hier .
Die festen Header funktionieren gut, aber ich habe ein Problem beim ersten Laden.
Wenn die Tabelle zum ersten Mal geladen wird, sieht das so aus:
Aber wenn ich einmal auf die Spaltenköpfe klicke, um sie nach diesem Wert zu sortieren, rastet alles ein und sieht dann so aus:
Wie ich in meinem vorherigen Beitrag gesagt habe, benutze ich das anguFixedHeaderTable -Plugin. Die Header bleiben gut, aber ich bekomme nur diesen Fehler. Ich kann Details zu allen Ressourcen, die ich in diesem Projekt verwende, bereitstellen, wenn das hilft, das Problem zu beheben. Ich kann mehr Informationen zur Verfügung stellen, aber ich weiß einfach nicht, was ich an dieser Stelle bieten soll.
Zusätzlich , wenn ich auf die Spalte klicke, um die Liste zu sortieren, flackert die Tabelle, bis sie auf die volle Größe expandiert, bevor sie mit einer Bildlaufleiste wieder auf eine Höhe von 300 Pixeln kommt. Wenn ich noch ein paarmal darauf klicke, wird es ohne Tabellenflimmern sortiert. Wenn ich auf eine neue Spaltenüberschrift klicke, um danach zu sortieren, flackert es wieder einmal, aber ein paar weitere Klicks derselben Überschrift führen zu einer reibungslosen und sauberen Reihenfolge. Irgendeine Idee, was dieses Flimmern verursacht?
Bearbeiten 1: Basierend auf dem Code Wizard habe ich den Arbeitscode aus der Demo genommen und in die github .js Datei geschrieben. Folgendes habe ich jetzt:
%Vor% Das funktioniert beim ersten Laden wirklich perfekt. Das einzige Problem ist, dass ich zwei Tabellen habe, zwischen denen der Benutzer per Knopfdruck wechseln kann. Diese Tabellen werden mit einem einfachen ng-show -Ausdruck gesteuert, um festzustellen, welche Ansicht der Benutzer ausgewählt hat. Wenn also der Tisch zum ersten Mal geladen wird, sieht das in beiden Ansichten genau so aus, wie sie aussehen sollten. Aber wenn Sie weiter hin und her schalten, beginnen die Spalten wieder zu versauen. Bis Sie auf die Spalte klicken, um sie zu sortieren, wird sie wieder eingefügt.
Bearbeiten 2: Ich habe versucht, die CSS-Route zu gehen und ich habe es meistens funktioniert. Einziges Problem ist, dass die Spalten etwas falsch ausgerichtet sind. Das Hauptproblem ist, dass die Spaltenbreiten nicht dynamisch sind. Hier ist ein Ploter , um mein Problem zu reproduzieren. Wie Sie sehen können, wird der erste Spalteninhalt der ersten Zeile in die angrenzende Spalte übertragen. Ich möchte, dass die Spalten dynamisch und ausgerichtet sind
4 Antworten
Da ich Ihren Code nicht habe, kann ich nur versuchen, Ihnen zu helfen, indem Sie auf einige Probleme hinweisen, die dieses Problem verursachen könnten.
Wenn die HTML-Engine Tabellen ausgibt, muss sie alle Zellen durchlaufen und die maximale Breite jeder Zelle berechnen, um die maximale Breite pro Tabellenspalte zu finden.
Die anguFixedHeaderTable verwenden diesen Code:
Und diese Funktion wird hier ausgelöst:
%Vor%Wenn die Tabelle noch nicht geladen ist, wenn dieser Code ausgeführt wird, "repariert" die Tabelle ihre Breite und verwendet die Standardbreite, die von der HTML-Engine festgelegt wurde.
Was ich vorschlage, um es zu reparieren, ist das Laden der Tabelle und nur Nach dessen Laden (um sicher zu sein, dass die Funktion aufgerufen wird, nachdem die Tabelle geladen wurde) Java Script zu verwenden Code, der die Richtlinie an die Tabelle anfügen wird, um dieses Modul umzuschreiben, um dieses Problem zu beheben.
Updates nach dem Spielen mit dem Code und versuchen, das Problem zu beheben.
Note
Auf der Demo-Site ist der Code anders als der in GitHub
Democode: - Ссылка
GitHub-Code - Ссылка
Und der Unterschied ist dies:
%Vor%Nimm den Code aus der Demo und es wird wie erwartet funktionieren.
Viel Glück.
Versuchen Sie, etwas CSS ass gut hinzuzufügen. Bitte werfen Sie einen Blick auf diesen modifizierten CodePan -
%Vor% Versuchen Sie, width:100%; in Tabelle und tr hinzuzufügen?
Ihr Problem ist größtenteils behoben, und ich denke, Sie müssen nur Korrekturen von CSS anwenden, um es zu vervollständigen. Wie wäre es, wenn wir die erste Spalte so umhüllen:
%Vor%Die TDs in Ihrer Tabelle sind bereits reaktionsbereit, wir müssen nur modifizieren, damit der Inhalt nicht überläuft, indem Sie den Zeilenumbruch in jedem td anwenden, was Sie vielleicht denken würden, dass er passieren würde.
Mit dem obigen Code habe ich es auf das erste Kind angewendet, aber Sie können die gesamte Tabelle anpassen.
Tags und Links javascript html angularjs css html-table