'CustomWebResolver' – TreeTable

TreeTables (Baumtabellen) sind eine Kombination aus Tabelle und Baum. Dafür mappen Sie TreeTable analog zu einer normalen Tabelle. Zusätzlich müssen Sie die "Baumknoten Öffnen" bzw. "Schließen"-Buttons zuweisen.

QF-Test geht davon aus, dass die erste Spalte der Tabelle die Baum-Komponenten enthält. Sie können dieses Verhalten über die Konfigurationskategorie "treetableResolver" im 'CustomWebResolver installieren' anpassen.

KlasseNotwendige Komponenten / Unterelemente
TreeTableStellt den TreeTable dar, beinhaltet die Einträge.
TableRowStellt eine Tabellenzeile dar.
TableCellStellt eine Tabellenzelle bzw. einen Baumknoten dar.
TableHeaderStellt die Zeile mit den Überschriften dar.
TableHeaderCellStellt eine Überschrift dar.
Expander:TreeNodeExpanderStellt den Baumknoten Öffnen bzw. Schließen Button dar.
 Optionale Unterelemente
TreeNode(Optional) Repräsentiert einen Baumknoten, muss innerhalb einer TableCell liegen.
Spacer:TreeNodeSpacer(Optional) Wird verwendet um die Einrückung auf die richtige Ebene zu bewerkstelligen.
CheckBox:TreeNodeCheckBox(Optional) Stellt eine CheckBox unter einem Baumknoten dar.
Icon:TreeNodeIcon(Optional) Stellt ein Icon unter einem Baumknoten dar.
Tabelle 49.3:  Mapping von TreeTables

Beispiel:

Ein TreeTable könnte im HTML-Code etwa so aussehen:

<table id="DetailsTreeTable" class="treetable">
  <thead>
    <tr>
      <th>Information</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr class="treenode odd>
      <td>
        <span class="treetoggler"></span>
        <span>Item 1</span>
      </td>
      <td>Lorem ipsum</td>
    </tr>
    <tr class="treenode odd>
      <td>
        <span class=treenodespacer">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>Item 1.1</span>
      </td>
      <td>Dolor sit amet</td>
    </tr>
  </tbody>
</table>
Beispiel 49.22:  HTML TreeTable

Die zugehörige Konfiguration des CustomWebResolver installieren Knotens könnte folgendermaßen aussehen:

genericClasses:
- TreeTable: treetable
- TableRow: <TR>
- TableCell: <TD>
- TableHeader: <THEAD>
- TableHeaderCell: <TH>
- Expander:TreeNodeExpander: treetoggler
Beispiel 49.23:  TreeTable CWR-Konfiguration