Oto prosta funkcja generująca dynamiczne drzewo w oparciu o java script. W łatwy sposób można ją przerobić także dla rekordów pobieranych z bazy danych. Jeżeli ktoś chce sobie tylko wygenerować drzewo np. linków, wystarczy że odpowiednio umieści linki w tablicy i przypisze im przodków. Wkrótce napisze klasę, która pozwoli obługiwać takie drzewo (zarówno dla rekordów z bazy danych, jak i dla statycznych celów).
Fragment html:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250"> <script TYPE="text/javascript" LANGUAGE="JavaScript">
function ukryj()
{
var i=0;
while(document.getElementById(i))
{
document.getElementById(i).style.display='none';
zmiana=eval('document.formatka.node'+i+'');
zmiana.value='+';
Tablica_node[i]=0;
i++;
}
}
function odkryj()
{
var i=0;
while(document.getElementById(i))
{
document.getElementById(i).style.display='block';
zmiana=eval('document.formatka.node'+i+'');
zmiana.value='-';
Tablica_node[i]=1;
i++;
}
}
var Tablica_node;
Tablica_node=new Array(0);
function inode(value1)
{
if(!Tablica_node[value1])Tablica_node[value1]=0;
zmiana_znaczka=eval('document.formatka.node'+value1+'');
wezel=eval('document.getElementById('+value1+')');
Tablica=new Array('+','-');
if(Tablica_node[value1]==0){
zmiana_znaczka.value=Tablica[1];
wezel.style.display='block';
Tablica_node[value1]=1;
}
else{
zmiana_znaczka.value=Tablica[0];
wezel.style.display='none';
Tablica_node[value1]=0;
}
}
A skrypt działa tak:
<li>Korzeń drzewa tworzą osobniki nie posiadające przodków
<li>ID osobnika jest równe jego pozycji w tablicy
<li>Każdy osobnik tworzy tabele o ID=id_siebie
<li>Każda kolejna tabela ma funkcje inode(x) gdzie x to ID odkrywanej tabeli
<li>W ten sposób po ukryciu tabeli przodka, potomkowie nie ukryci wciąż
pozostają odkryci (jak w systemie drzewiastym katalogów)
<li>Skrypt niezwykle łatwo jest przystosować do wszystkiego
<!-- może być display=block i display=none -->
<input onclick=odkryj() type=button value='Odkryj wszystko'> <input onclick=ukryj() type=button value='Ukryj wszystko'>
Fragment php:
<?php
/*
@Autor: Marcin Makowski
Skrypt generujący drzewo, z możliwością dynamicznego
odkrywania i ukrywania potomków
*/
/*
Funkcja drzewo
@arg Tablica - tablica asocjacyjna z przyporządkowanymi przodkami
@arg Przodek - zawiera w sobie indeks tablicy przodka do wyswietlenia
@arg Potomek - zawiera ilość potomków danego przodka, pomocny przy
wyświetlaniu drzewa
*/
function drzewo($tablica,$przodek,$potomek)
{
//$i - to indeks elementu tablicy
$i=0;
foreach($tablica as $tytul=>$pr)
{
//Wyświetlamy z tablicy tylko danych przodków
if($pr==$przodek)
{
echo '<table border=0 height=20><tr><td width='.($potomek*10).'></td><td width=30>'; /*szukanie potomków
W tym celu kopiujemy tablice aby móc na niej operować
*/
$tablica2=$tablica;
foreach($tablica2 as $tytul2=>$pr2)
{
if($pr2==$i)
{
echo'<input onclick=inode('.$i.') type=button name=\"node'.$i.'\" value=\"+\">'; break; //Jeżeli znaleziony to wyskakujemy
}
}
echo'</td><td>'.$tytul.\"</td></tr></table>\"; $potomek++;
echo'<table id='.$i.'><tr><td>'; //otwieramy tabele dla potomków o ID=indeks bieżącego osobnika drzewo($tablica,\"\".$i.\"\",$potomek); //rekurencyjnie, szukamy potomków aktualnego osobnika
echo'</td></tr></table>'; $potomek--;
}
$i++;
}
}
//Indeks elemntu w tablicy to ID osobnika, druga wartość to jego przodek
$tablica=array(\"Temat\"=>\"\", \"Sie wyswietli\"=>\"0\",
\"Sie2\"=>\"0\",
\"Przodek wyswietli\"=>\"1\",
\"Temat2\"=>\"\",
\"Przodek sie2\"=>\"2\");
drzewo($tablica,\"\",0);
?>
I zakończenie html:
<script TYPE="text/javascript" LANGUAGE="JavaScript"> ukryj();
Skrypt ten (ale oczywiście zmodyfikowany) będe używał w pisanym przez siebie forum wątkowym
Generator drzewek (PHP+JS), Funkcja, PHP 4 i 5
7.06.2005, 17:26:10
Marcin_m Generator drzewek (PHP+JS) 7.06.2005, 17:26:10 
