diff --git a/Client/Components/widgets/Treetable_V2.ts b/Client/Components/widgets/Treetable_V2.ts index 7bc46b9..49ff947 100644 --- a/Client/Components/widgets/Treetable_V2.ts +++ b/Client/Components/widgets/Treetable_V2.ts @@ -33,10 +33,17 @@ export interface iTreetable { columnmapper: Columnmapper onRowMarked?: (node: iTreenode) => void filter?: (row:iTreenode, searchvalue:string) => boolean + /** Optional: Callback, der für eine Treenode bestimmt, ob die gesamte + * Tabellenzeile als markiert (selektiert) dargestellt werden soll. + * Wenn gesetzt, übernimmt das Widget die Hintergrund-Einfärbung der + * -Zeile; die columnmapper-Inhalte brauchen dann kein eigenes + * Selektions-Styling mehr. */ + isSelected?: (node: iTreenode) => boolean } export const Treetable: m.ClosureComponent = (vnode) => { let onRowMarked = vnode.attrs.onRowMarked === undefined ? (node: iTreenode) => {} : vnode.attrs.onRowMarked + let isSelected = vnode.attrs.isSelected let expandtoggle: boolean = true let searchvalue:string = "" function setSearchvalue(v:string) { @@ -68,10 +75,11 @@ export const Treetable: m.ClosureComponent = (vnode) => { if (vnode.attrs.filter == undefined || (vnode.attrs.filter != undefined && vnode.attrs.filter(tn, searchvalue) == true)) { return m(Treerow, { // ACHTUNG: Änderungen hier müssen unten beim rekursiven Aufruf der Treerow-Funktion ebenfalls eingebaut werden - treenode: tn, - level: 0, - columnmapper1: vnode.attrs.columnmapper, + treenode: tn, + level: 0, + columnmapper1: vnode.attrs.columnmapper, onRowMarked: onRowMarked, + isSelected: isSelected, isEven: ((z % 2) == 0)} as iTreerow) } else { @@ -91,16 +99,22 @@ interface iTreerow { level: number columnmapper1: Columnmapper onRowMarked: (node: iTreenode) => void + isSelected?: (node: iTreenode) => boolean isEven?: boolean } let Treerow: m.ClosureComponent = (vnode) => { return { view: (vnode) => { + // Wenn ein isSelected-Callback gesetzt ist, prüfen, ob diese + // Zeile selektiert ist; in diesem Fall wird der Hintergrund der + // gesamten -Zeile eingefärbt. + const rowSelected = vnode.attrs.isSelected ? vnode.attrs.isSelected(vnode.attrs.treenode) : false return [ m("tr.w3-border-theme", {onmouseup: () => vnode.attrs.onRowMarked(vnode.attrs.treenode), onkeyup: () => vnode.attrs.onRowMarked(vnode.attrs.treenode), - class: (vnode.attrs.isEven ? "w3-tablerow-even" : "w3-tablerow-odd"), + class: (vnode.attrs.isEven ? "w3-tablerow-even" : "w3-tablerow-odd") + + (rowSelected ? " w3-theme-l4" : ""), style: {'border-top-style': 'solid', 'border-top-width': '1px'} }, m("td", // Zunächst wird ein td-Element für die erste Spalte der Tabelle erzeugt, damit dort die @@ -146,10 +160,11 @@ let Treerow: m.ClosureComponent = (vnode) => { vnode.attrs.treenode.hasChildren && vnode.attrs.treenode.expand ? vnode.attrs.treenode.children.map((tn: iTreenode, z) => { return m(Treerow, { - treenode: tn, - level: vnode.attrs.level + 1, - columnmapper1: vnode.attrs.columnmapper1, + treenode: tn, + level: vnode.attrs.level + 1, + columnmapper1: vnode.attrs.columnmapper1, onRowMarked: vnode.attrs.onRowMarked, + isSelected: vnode.attrs.isSelected, isEven: ((z % 2) == 0) } as iTreerow) })