nicht angemeldet
Baumstruktur in einer Tabelle
Guten Tag zusammen,
ich möchte gerne in einer Tabelle eine 3 Ebene tiefe Baumstruktur abbilden. Jede Tabellenzeile enthält mehrere Zellen, in der ersten soll die Baumstruktur verdeutlicht werden. Durch das Einrücken des Textes mit Hilfe von CSS sieht das ganze dann auch schön baumartig aus. Allerdings möchte ich, dass beim Klick auf einen Vaterpunkt die Kinder ein- bzw. ausgeblendet werden können. Hier mal als Verdeutlichung der Aufbau:
-------------------------------------------------------------
Punkt 1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
-Punkt 1.1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
--Punkt 1.1.1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
--Punkt 1.1.2 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
-Punkt 1.2 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
--Punkt 1.2.1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
Meine erste Idee war, alle Kinder eines Vaters in einem TBODY-Tag zu gruppieren und dieses mit display:block/none anzuzeigen bzw auszublenden.
Da ich mehrere Ebenen habe, müsste ich diese Tags dann leider ineinander verschachteln, was leider nicht mehr funktioniert.
Ich habe das ganze anschliessend mit verschachtelten DIVs versucht, das Problem ist hierbei aber, dass nicht das breiteste DIV (aufgrund des Inhalts) die Breite der Spalte bestimmt, sondern jede Zeile unterschiedlich breite DIVs aufweist. Auch das handhaben der DIVs war sehr viel schwieriger als mit einer Tabelle.
Aus diesem Grund habe ich diese Möglichkeit wieder verworfen und bin zurück zur Tabelle (welche in diesem Einsatz auch richtig wäre, es ist ein tabellarische Ansicht).
Nun könnte ich mittels JavaScript natürlich jeden Ast durchlaufen und einzeln ein- oder ausblenden, schön finde ich das aber auch nicht.
Kann mir jemand einen Tip geben, wie ich das noch realisieren könnte?
MFG
Stefan
-
hi,
ich möchte gerne in einer Tabelle eine 3 Ebene tiefe Baumstruktur abbilden.
Warum nimmst du keine Listen dafür?
Da ich mehrere Ebenen habe, müsste ich diese Tags dann leider ineinander verschachteln, was leider nicht mehr funktioniert.
Bei Listen problemlos möglich.
Und auch der Rest der Anforderung, das Ausblenden von Zweigen, dürfte sich damit wesentlich besser realisieren lassen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Warum nimmst du keine Listen dafür?
Hi wahsaga,
ich dachte bislang, eine Liste besteht im Grunde nur aus einer Zelle, nicht aus mehreren nebeneinander. Ich habe in der Tabelle mehrere (leider noch dynamisch viele) Zellen in einer Zeile...
MFG
Stefan-
Yerf!
ich dachte bislang, eine Liste besteht im Grunde nur aus einer Zelle, nicht aus mehreren nebeneinander. Ich habe in der Tabelle mehrere (leider noch dynamisch viele) Zellen in einer Zeile...
Man könnte für eine Zeile wiederum eine (diesmal horizontale) Liste nehmen. Allerdings besteht dann wieder die Problematik mit der Spaltenbreite (ähnlich wie bei den Divs). Aber evtl. hat ja jemand eine schlaue Lösung dafür, würde mich auch interessieren.
Gruß,
Harlequin
-
Warum nimmst du keine Listen dafür?
Hi wahsaga,
ich dachte bislang, eine Liste besteht im Grunde nur aus einer Zelle, nicht aus mehreren nebeneinander. Ich habe in der Tabelle mehrere (leider noch dynamisch viele) Zellen in einer Zeile...
MFG
Stefanich musste mal sowas ähnliches machen, ist vermutlich nicht genau das was du suchst, könnte dir aber denoch weiterhelfen:
-- CSS --
li { clear:both; }
li div
{
float:right;
top:0px;
width:100px;
background-color:#9e9;
}
div { margin:1px;padding:1px; }-- HTML --
<ul>
<li>Test Level 1 - 1
<ul>
<li>Test Level 2 - 1.1<div class="c3">Cell3</div><div class="c2">Cell2</div><div class="c1">Cell1</div></li>
<li>Test Level 2 - 1.2<div class="c3">Cell3</div><div class="c2">Cell2</div><div class="c1">Cell1</div></li>
<li>Test Level 2 - 1.3<div class="c3">Cell3</div><div class="c2">Cell2</div><div class="c1">Cell1</div></li>
</ul>
</li>
<li>Test Level 1 - 2
<ul>
<li>Test Level 2 - 2.1<div class="c3">Cell3</div><div class="c2">Cell2</div><div class="c1">Cell1</div></li>
<li>Test Level 2 - 2.2<div class="c3">Cell3</div><div class="c2">Cell2</div><div class="c1">Cell1</div></li>
<li>Test Level 2 - 2.3<div class="c3">Cell3</div><div class="c2">Cell2</div><div class="c1">Cell1</div></li>
</ul>
</li>
<li>Test Level 1 - 3</li>
<li>Test Level 1 - 4</li>
</ul>Ursprünglich war der Code dazu gedacht, sehr grosse Tabellen auf sehr kleinen Bildschirmen anzuzeigen, ohne das der Benutzer Horizontal rumscrollen musste. Damit ist es möglich einen Baum mit Feldern darzustellen. Die div's kannst du ja auch durch ein anderes Blockelement austauschen.
-
-
-
Hallo,
ich realisiere sowas ähnliches gerade mit NestedSets.
Gruß,
Leeloo--
"Als es noch keine Computer gab, war das Programmieren noch relativ einfach." - Edsger W. Dijkstra -
Hallo,
da fällt mir ein in JavaScript gibts auch was schönes: JTree.
Gruß,
Leeloo--
"Als es noch keine Computer gab, war das Programmieren noch relativ einfach." - Edsger W. Dijkstra -
Guten Tag,
ich möchte gerne in einer Tabelle eine 3 Ebene tiefe Baumstruktur abbilden.
Wieso mit einer Tabelle? Wozu gibt es Elemente wie <tree> usw.?
Wenn Du Deine Seiten ordentlich als xml-Dokumente gestaltest hast Du auch keine Probleme dem Bereich den richtigen Namespace zuzuordnen, xmlns="http://www.w3.org/1999/xhtml" hilft da nicht.
Ach Ja! Infos zu <tree> gibst auf Xulplanet:
http://xulplanet.com/references/elemref/Gruß
Gloria-
Hallo,
Wenn Du Deine Seiten ordentlich als xml-Dokumente gestaltest hast
Und was bringt das? Die Seiten sind dann nur benutzbar, wenn sie mit dem Stylesheet angezeigt werden können. Screenreader werden alles nach einander ohne Betonung oder sonstwas erzählen und Suchmaschinen können sich wahrscheinlich auch keinen Reim darauf machen, was die Elemente bedeuten sollen.
Für Webseiten gibt es XHTML, wozu soll man das Rad neu erfinden?
Ach Ja! Infos zu <tree> gibst auf Xulplanet:
http://xulplanet.com/references/elemref/Es wird ja immer schlimmer. IMHO haben Solche Browserfenster-Gestaltungsspachen nichts im Web verloren.
Ich hoffe diese Browserfenster-Sprachen-im-Web-Krankheit breitet sich nicht zu sehr aus, denn sonst werden wohl die einen Seiten auf XUL basieren und nur in Geckos laufen, während die anderen auf XAML basieren und nur im IE funzen. IMHO keine gute Entwicklung.
mfg. Daniel
-
Hallo,
ich möchte gerne in einer Tabelle eine 3 Ebene tiefe Baumstruktur abbilden.
Wieso mit einer Tabelle? Wozu gibt es Elemente wie <tree> usw.?
Ach Ja! Infos zu <tree> gibst auf Xulplanet:
http://xulplanet.com/references/elemref/Beispielhaft nutzlose Antwort!
Gruß
GloriaSic transit!
Grüße
Thomas
-
-
Hallo Stefan,
ich hab mir eben Dein Problem mal bildlich vorgestellt und mir ist spontan dieser Gedanke gekommen. Vielleicht hilft er Dir weiter.
Aber zuvor kurz eine kleine Erklärung: Bau Dir eine Tabelle und gib jeder (!!!) Reihe eine ID. Dabei wählst Du einen beliebigen Namen (hier: item) und eine fortlaufende Nummer für jedes Level. Kindreihen erhalten die ID des Vaters Plus eine eigene fortlaufende Nummerierung, die unbedingt durch ein beliebiges Zeichen getrennt sein muss (hier: l = kleines l für Level)! Zusätzlich gibst Du jedem Kind als name Attribut den Namen des Papas. ;-)
Jetzt kannst Du einfach über getElementByName die Kinder auswählen und entsprechend dem Vorgang entweder ein- oder ausblenden. Sollte dann recht einfach sein... Habs nicht gemacht, würde mir das aber in weniger als einer Stunde zutrauen... :-D
Falls Du damit eine Lösung implementierst, wäre es toll, wenn Du sie hier noch mal posten könntest. Wäre sicher interessant, auch für andere. Danke!
Schöne Grüße und viel Erfolg mit folgendem Markup:
<table>
<tbody>
<!-- Item 1 auf Level 1 -->
<tr id="item1">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- Item 1 auf Level 2, Kind von id=item1
<tr id="item1l1" name="item1">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- Item 1 auf Level 3, Kind von id=item1l1
<tr id="item1l1l1" name="item1l1">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- Item 2 auf Level 3, Kind von id=item1l1
<tr id="item1l1l2" name="item1l1">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- Item 2 auf Level 2, Kind von id=item1
<tr id="item1l2" name="item1">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr><!-- Item 2 auf Level 1 -->
<tr id="item2">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- Item 1 auf Level 2, Kind von id=item2
<tr id="item2l1" name="item2">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- Item 2 auf Level 2, Kind von id=item2
<tr id="item2l2" name="item2">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr><!-- Item 3 auf Level 1 -->
<tr id="item3
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr><!-- usw. -->
</tbody>
</table>-
Yerf!
Habs nicht gemacht, würde mir das aber in weniger als einer Stunde zutrauen... :-D
Sicher? Ich befürchte, dass das Ganze am ungültige Name-Attribut in den TDs scheitern wird...
Man wird wohl nicht drum herum kommen, den Baum nochmals in JS abzubilden, um von dort aus eine Zuordnung auf die IDs der Tabellenzeilen durchzuführen. Die von Leeloo erwähnten NestedSets hören sich dabei recht interessant an.
Gruß,
Harlequin
-
» Sicher? Ich befürchte, dass das Ganze am ungültige Name-Attribut in den TDs scheitern wird...
»
» Man wird wohl nicht drum herum kommen, den Baum nochmals in JS abzubilden, um von dort aus eine Zuordnung auf die IDs der Tabellenzeilen durchzuführen. Die von Leeloo erwähnten NestedSets hören sich dabei recht interessant an.Das habe ich auch grade überlegt und dann gemerkt dass es natürlich nicht geht. Kein Grund zur Sorge. Man nehme das class Attribute und bilde dort die Angaben aus dem name Attribute ab. Eine JS Methode für getElementByClass sollte ja nicht das Problem sein. Damit bricht man zwar die Logik für das class Attribut, hat aber dennoch eine elegante Methodik für diesen Anwendungsfall.
Schöne Grüße,
bechte
-
-