Eine Baumtabelle ist eine hierarchische Anordnung von Daten, die in Zeilen und Spalten organisiert und in Knoten gruppiert sind. alternateRowColors ist ein UI5-Tabellenattribut, das wechselnde Tabellenzeilenfarben ermöglicht.
Leider unterstützt die Baumtabelle diese Eigenschaft nicht, wie aus dem folgenden Screenshot der API-Dokumentation.
Die Eigenschaft alternateRowColors in einer Tabelle kann verwendet werden, um eine Zeile von einer anderen zu unterscheiden und die Daten mit einer besseren Benutzeroberfläche zu analysieren. Ein hierarchischer Datensatz wird als ein Abschnitt in der Baumtabelle betrachtet, der aus einer Kombination zahlreicher Zeilen besteht, was zu einer variablen Höhe dieses Abschnitts führt.
Die folgende Abbildung zeigt eine Baumtabelle mit vier Zeilen.
Wenn die erste Baumzelle aufgeklappt wird, ergibt sich die hierarchische Struktur. Der hervorgehobene Teil darunter (die Höhe kann variieren) kann als ein ganzer Abschnitt (Zeile) betrachtet werden.
Während sap.m.Table und sap.ui.table.Table eine gute Nutzung von altRowColors Eigenschaft unterstützt die treeTable aufgrund ihrer variablen Zeilenhöhe hingegen nicht.
Hier ist ein kleines Experiment, das ich durchgeführt habe, um dieses Szenario zu bewältigen.
Als ich mit der Umsetzung dieses Problems begann, hatte ich zunächst die Idee, die Zeilen zu unterscheiden. Ich habe in verschiedenen Bereichen nachgeschaut, um herauszufinden, wie man mehrere zusammengeführte Zeilen als eine einzige Zeile behandeln kann. Dabei fiel mir eine Eigenschaft namens "aria-level" im DOM-Baum auf. Diese konnte ich nur als Unterscheidungsmerkmal identifizieren. Ich wusste also, wo ich anfangen musste.
Ich habe mein eigenes benutzerdefiniertes CSS auf der Grundlage von "aria-level" erstellt und auf die Tabelle angewendet, und es hat funktioniert!
/**
* holt die Tabelle und wendet Hintergrundfarben auf die Zeilen an
*/
applyBgColorsToTableRows() {
const body = document.getElementsByTagName('body')[0];
const table = body.getElementsByTagName('table')[1];
const tableBody = table.getElementsByTagName('tbody')[0];
const rows = tableBody.getElementsByTagName('tr');
const tableLength = rows.length;
let rowNumber = 0;
for (let i = 0; i < tableLength; i += 1) {
if (rows[i + 1]?.ariaLevel === '1') {
rows[i].setAttribute('rowNumber', rowNumber);
this.setClassToTableRows(rowNumber % 2 === 0, rows[i]);
rowNumber += 1;
} else {
rows[i].setAttribute('rowNumber', rowNumber);
this.setClassToTableRows(rowNumber % 2 === 0, rows[i]);
}
}
},
/**
* setzt die benutzerdefinierte css-Klasse auf die Tabellenzeile
*/
setClassToTableRows(isRowEven, row) {
if (isRowEven) {
row.classList.remove('evenRow', 'oddRow');
row.classList.add('evenRow');
} sonst {
row.classList.remove('evenRow', 'oddRow');
row.classList.add('oddRow');
}
},
Nun trat das eigentliche Problem auf. Meine Lösung war instabil, weil sich "aria-level" jedes Mal ändert, wenn eines der oben genannten Ereignisse oder zahlreiche andere, mit dem Tabellenbildschirm verbundene Ereignisse ausgelöst werden. Dazu gehört jede Änderung in einer Zeile, jedes Scrollen oder jede Änderung der Auflösung.
In meinem ersten Versuch wurde das Ereignis "mousemove" verwendet. Das CSS wird immer dann angewendet, wenn die Maus bewegt wird, egal ob wir die Seite scrollen, Zeilen hinzufügen oder entfernen oder irgendeine andere mögliche Bewegung ausführen. Es funktionierte größtenteils wie beabsichtigt, aber es gab ein paar Pannen, wie z. B. die Unfähigkeit, die Tastatur zu bewegen, was offensichtlich ziemlich dumm ist und sicherlich nicht der richtige Weg, um dies zu erreichen.
Dann habe ich mit setInterval experimentiert, das dafür sorgt, dass CSS alle 2 Sekunden angewendet wird, unabhängig davon, was mit der Tabelle, der Seite, der Auflösung usw. gemacht wird, und danach habe ich auch requestAnimationFrame ausprobiert. Alle diese Methoden waren recht effektiv, aber auch hier musste eine bessere Lösung gefunden werden.
Schließlich fand ich die Antwort in der API-Dokumente allein.
Die Eigenschaft "rowsUpdated" der Tabelle - Das Ereignis wird bei der Aktualisierung der Tabellenzeilen als Ergebnis des Renderings, einer Modellaktualisierung oder einer Benutzerinteraktion gemäß der API-Spezifikation ausgelöst.
Daraus konnten wir ableiten, wann wir unser CSS einsetzen sollten.
Die endgültige Anwendung sieht in etwa so aus:
Zusammenfassend lässt sich sagen, dass die alternativen Zeilenfarben für eine Baumtabelle durch benutzerdefiniertes CSS und die Verwendung von "aria-level" als Unterscheidungsmerkmal erreicht werden können. Diese Lösung basiert auf der Eigenschaft "rowsUpdated" in der API-Dokumentation. Sie bietet eine bessere Benutzeroberfläche für hierarchische Daten.
Probieren Sie die oben beschriebene Anwendung hier aus: https://feat-alt-row-colors-treetable.netlify.app
