✔ Gruppierungsfunktion von Excel simulieren

[karl123]

Hallo,

ich komme gerade von PHP-Forum, wo ich feststellen musste, dass mein Thema besser mit Javascript / Ajax zu lösen ist.

Ich möchte die Gruppierungsfunktion von Excel simulieren. (Man klickt in einer Liste auf ein + vor einer Zeile und eine dazu gehörende Untergruppe öffnet sich. Mit - kann man das wieder schließen).

Gibt es dazu bereits fertige Scripte?

 

[tombe]

So jetzt verstehe ich besser was du machen willst:

<style type="text/css">
<!--
a.detail:link { text-decoration: none; color: #000000; }
a.detail:visited { text-decoration: none; color: #000000; }
a.detail:focus { text-decoration: none; color: #000000; }
a.detail:hover { text-decoration: none; color: #000000; }
a.detail:active { text-decoration: none; color: #000000; }
-->
</style>
<script language="javascript" type="text/javascript">
function show(id) {
    if (document.getElementById("d" + id).style.display == "none") {
        document.getElementById("d" + id).style.display = "block";
        document.getElementById("t" + id).innerHTML = "( - )";
    } else {
        document.getElementById("d" + id).style.display = "none";
        document.getElementById("t" + id).innerHTML = "( + )";
    }
}
</script>

Details <a href="#" onclick="show('1')" id="t1" class="detail">( + )</a>
<div id="d1" style="display:none;">- Block 1 - Zeile 1
<br />
- Block 1 - Zeile 2
<br />
- Block 1 - Zeile 3
</div>
<br />
<br />
<br />
Details <a href="#" onclick="show('2')" id="t2" class="detail">( + )</a>
<div id="d2" style="display:none;">- Block 2 - Zeile 1
<br />
- Block 1 - Zeile 2
<br />
- Block 1 - Zeile 3
</div>

 

[hela]

... Gibt es dazu bereits fertige Scripte?

Sieh mal hier: http://www.onlinetools.org/ -> STUFF/TOOLS -> DomCollapse

 

[karl123]

Danke an euch beide.

Das Script von tombe ist einfach und funktioniert gut.

Der Link von hela beinhaltet ein Script "PureDOMExplorer", welches meinen Vorstellungen am nächsten kommt.

Werde ich jetzt mal ausprobieren.

 

[franz007]

Ich habe diese 2 schon verwendet:

http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html#examples
http://jquery.bassistance.de/treeview/demo/