Lesbare Tabellen in Webportalen? Einfach dem Benutzer die Kontrolle übergeben!
Wer kennt es nicht: Man liest im Internet einen interessanten Artikel, in dem eine Tabelle dargestellt wird. Meist werden verschiedene Produkte / Optionen etc. verglichen. Und häufig werden so viele Informationen geboten, dass man häufig scrollen muss, um die Informationen lesen zu können. Oder die Spalten sind so schmal, dass die Lesbarkeit zu wünschen übriglässt.
Wie wäre es, wenn ich als Leser mir die Spaltenbreite so ändern könnte, dass es für mich perfekt passt? Hier können Sie lesen, wie man das umsetzt.
Tabellendarstellung im Web – der Browser optimiert von sich aus
Die Darstellung von Tabellen wird durch den Browser automatisch angepasst. Durch eine automatische Breitenberechnung für Tabellenspalten werden die Inhalte in den meisten Fällen völlig ausreichend dargestellt. Bei Tabellen mit großer Informationsmenge kann dies aber zu sehr schmalen Spalten führen, die für den Nutzer schlecht lesbar sind.
Wenn Plugins nicht verwendbar sind – eine individuelle Lösung mit JavaScript
Bei einer Neuentwicklung einer Software kann die gewünschte Funktionalität mittlerweile über verschiedene Plugins für Tabellen umgesetzt werden.
In unserem Fall haben wir aber eine über mehrere Jahre weiterentwickelte Anwendung. Alle Tabellen sind gemäß einem einheitlichen -Layout aufgebaut und mit dem gesamten Portal Design abgestimmt worden. Der Austausch von Plugins würde größere Layout Anpassungen erfordern und damit weitere Umbau-Aufwände erzeugen.
Somit haben wir uns entschieden, eine Lösung mittels JavaScript zu implementieren, die ich nachfolgend beschreibe.
Für die Umsetzung benötigen wir 3 Eventhandler, die für die Neuberechnung der Tabellenspalten zuständig sind.
Event „mousedown“
In diesem Event ermitteln wir folgende Werte, die wir für die nächsten Schritte zwischenspeichern:
- der aktuelle X-Wert, an dem sich die Maus befindet
- die selektierte Tabellenspalte
- die aktuelle Breite der Spalte.
div.addEventListener('mousedown', function (e) {
tableWidth = $(table).outerWidth();
curCol = e.target.parentElement;
pageX = e.pageX;
curColWidth = $(curCol).outerWidth();
});Event „mousemove“
In diesem Event wird anhand der Bewegung der Maus der neue X-Wert berechnet.
Die Differenz zwischen dem X-Wert aus dem „mousedown“ Event und dem X-Wert aus dem „mousemove“ wird zur aktuellen Spaltenbreite aufaddiert / abgezogen. Damit wird die Breite in Echtzeit errechnet und über die Style-Attribute width und minWidth gesetzt. Damit sich auch die gesamte Tabellenbreite an die Änderungen anpasst, muss auch diese neu errechnet und definiert werden.
document.addEventListener('mousemove', function (e) {
if (curCol) {
var diffX = e.pageX - pageX;
curCol.style.width = (curColWidth + diffX) + 'px';
curCol.style.minWidth = (curColWidth + diffX) + 'px';
table.style.width = (tableWidth + diffX) + "px";
}
});Event „mouseup“
In diesem Event wird für alle verbleibenden Tabellenspalten eine neue Breite berechnet und in den jeweiligen CSS-Style geschrieben. Damit die Spaltenbreite beim Wechseln der Seite oder Neuladen der Tabelle beibehalten wird, werden die Werte in der Browser Session gespeichert und beim Neuladen der Seite wieder in Tabelle eingetragen.
document.addEventListener('mouseup', function (e) {
if (curCol) {
table.style.width = $(table).outerWidth() + "px";
var identifier = "";
var values = {};
var calculatedColumnWidth = calculateColumnWidth();
for (var i = 0; i < cols.length; i++) {
var thId = $(cols[i]).attr('id')
if (identifier === "") {
identifier = thId.split('_')[0];
}
var columnName = thId.split('_')[1];
var colWidth = calculatedColumnWidth[i];
$(cols[i]).css({"min-width": colWidth + "px"});
$(cols[i]).css({"width": colWidth + "px"});
values[columnName] = colWidth;
}
values['tableWidth'] = $(table).outerWidth();
sessionStorageHandler.addItems(identifier, values);
var tableScrollEventId = identifier.split("-")[4] + '-drag-and-scroll';
}
curCol = undefined;
pageX = undefined;
curColWidth = undefined;
});
}Spaltenbreiten berechnen - Wie man die Optimierung des Browsers berücksichtigt
Im ersten Versuch wurde bei der Neuberechnung der Breite der Tabellenspalten der Wert direkt in den Style der Spalte geschrieben: Wir berechnen die erste Spalte, schreiben den Wert in den Style und wiederholen die Schritte für alle weiteren Spalten. Diese Methode hatte zur Folge, dass es beim Verschieben der Spaltenbreite öfters zu Sprüngen / Abweichungen kam, wie im Clip gut zu sehen ist.
Ursache war die laufende Berechnung und Aktualisierung. Wenn wir für die Tabelle eine minimale fixe Breite definieren und die Spalten genug Platz haben, versucht der Browser nach der Berechnung der ersten Spalte die anderen Spalten anzupassen, so dass die Tabelle gleichmäßig ausgefüllt ist. Dadurch kommt es bei den Berechnungen der anderen Spalten zu Abweichungen, die wiederum dazu führen, dass sich die Abweichungen pro Berechnungsschritt vergrößern und die Sprünge damit stärker werden.
Die Lösung dafür ist recht simpel: Wir berechnen alle Spaltenbreiten in Variablen und überschreiben die Style-Attribute in einem Schritt anstatt sequenziell. Dadurch entstehen keine Abweichungen durch die automatische Browserberechnung und die gesamte Spaltenbreite gleicht der Tabellenbreite.
Die individuelle Lösung – mit wenig Aufwand
Zusammenfassend können wir festhalten: Die Benutzer freuen sich, die Spaltenbreiten in den Tabellen individuell anpassen zu können. Und der Kunde ist zufrieden, dass wir diese Anforderung kostengünstig umsetzen konnten.
Vermissen Sie auch Funktionen in Ihrer Software? Oder brauchen Sie Lösungen, um Ihre „Standards“ miteinander zu verknüpfen?