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)
})