Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Generator drzewek (PHP+JS)
Forum PHP.pl > Forum > Gotowe rozwiązania > Algorytmy, klasy, funkcje
Marcin_m
7.06.2005, 17:26:10
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:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
  4. </head>
  5. <body>
  6. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  7.  
  8. function ukryj()
  9. {
  10. var i=0;
  11.   while(document.getElementById(i))  
  12.   {
  13.   document.getElementById(i).style.display='none';
  14.   zmiana=eval('document.formatka.node'+i+'');
  15.   zmiana.value='+';
  16.   Tablica_node[i]=0;
  17.   i++;
  18.   }
  19. }
  20.  
  21. function odkryj()
  22. {
  23. var i=0;
  24.  while(document.getElementById(i))
  25.  {
  26.   document.getElementById(i).style.display='block';
  27.   zmiana=eval('document.formatka.node'+i+'');
  28.   zmiana.value='-';
  29.   Tablica_node[i]=1;
  30.   i++;
  31.   }
  32. }
  33.  
  34.  
  35. var Tablica_node;
  36. Tablica_node=new Array(0);
  37.  
  38. function inode(value1)
  39. {
  40.  if(!Tablica_node[value1])Tablica_node[value1]=0;
  41.  
  42.  zmiana_znaczka=eval('document.formatka.node'+value1+'');
  43.  wezel=eval('document.getElementById('+value1+')');
  44.  
  45.  Tablica=new Array('+','-');
  46.  
  47.      if(Tablica_node[value1]==0){
  48.      zmiana_znaczka.value=Tablica[1];
  49.  
  50.      wezel.style.display='block';
  51.  
  52.      Tablica_node[value1]=1;
  53.                    }
  54.      else{
  55.      zmiana_znaczka.value=Tablica[0];
  56.  
  57.      wezel.style.display='none';
  58.  
  59.      Tablica_node[value1]=0;
  60.  
  61.      }
  62. }
  63.  
  64. </SCRIPT>
  65. A skrypt działa tak:
  66.  
  67. <li>Korzeń drzewa tworzą osobniki nie posiadające przodków
  68. <li>ID osobnika jest równe jego pozycji w tablicy
  69. <li>Każdy osobnik tworzy tabele o ID=id_siebie
  70. <li>Każda kolejna tabela ma funkcje inode(x) gdzie x to ID odkrywanej tabeli
  71. <li>W ten sposób po ukryciu tabeli przodka, potomkowie nie ukryci wciąż
  72. pozostają odkryci (jak w systemie drzewiastym katalogów)
  73. <li>Skrypt niezwykle łatwo jest przystosować do wszystkiego
  74.    <form name="formatka">
  75.  
  76. <!-- może być display=block i display=none -->
  77. <input onclick=odkryj() type=button value='Odkryj wszystko'>
  78. <input onclick=ukryj() type=button value='Ukryj wszystko'>
  79. <br>
[HTML] pobierz, plaintext


Fragment php:
[PHP] pobierz, plaintext 
  1. <?php
  2.   /*
  3. 	@Autor: Marcin Makowski
  4. 	Skrypt generujący drzewo, z możliwością dynamicznego
  5. 	odkrywania i ukrywania potomków
  6.  
  7.   */
  8.  
  9.   /*
  10. 	Funkcja drzewo
  11. 	@arg Tablica - tablica asocjacyjna z przyporządkowanymi przodkami
  12. 	@arg Przodek - zawiera w sobie indeks tablicy przodka do wyswietlenia
  13. 	@arg Potomek - zawiera ilość potomków danego przodka, pomocny przy
  14. 				   wyświetlaniu drzewa
  15.   */
  16. function drzewo($tablica,$przodek,$potomek)
  17.   {
  18.   //$i - to indeks elementu tablicy
  19.   $i=0;
  20.   foreach($tablica as $tytul=>$pr)
  21. 	{
  22. 	   //Wyświetlamy z tablicy tylko danych przodków
  23. 	   if($pr==$przodek)
  24. 	  {
  25. 	   echo '<table border=0 height=20><tr><td width='.($potomek*10).'></td><td width=30>';
  26. 	   /*szukanie potomków
  27. 		 W tym celu kopiujemy tablice aby móc na niej operować
  28. 		*/
  29. 		$tablica2=$tablica;
  30. 		reset($tablica2);
  31. 		foreach($tablica2 as $tytul2=>$pr2)
  32. 		{
  33. 		  if($pr2==$i)
  34. 		  {
  35. 		  echo'<input onclick=inode('.$i.') type=button name=\"node'.$i.'\" value=\"+\">';
  36. 		  break;  //Jeżeli znaleziony to wyskakujemy
  37. 		  }
  38. 		}
  39. 	   echo'</td><td>'.$tytul.&#092;"</td></tr></table>\";
  40. 	   $potomek++;
  41. 	   echo'<table id='.$i.'><tr><td>';  //otwieramy tabele dla potomków o ID=indeks bieżącego osobnika
  42. 	   drzewo($tablica,&#092;"\".$i.\"\",$potomek);  //rekurencyjnie, szukamy potomków aktualnego osobnika
  43. 	   echo'</td></tr></table>';
  44. 	   $potomek--;
  45. 	  }
  46. 	   $i++;
  47. 	}
  48.   }
  49. //Indeks elemntu w tablicy to ID osobnika, druga wartość to jego przodek
  50.   $tablica=array(&#092;"Temat\"=>\"\",
  51. 				 &#092;"Sie wyswietli\"=>\"0\",
  52. 				 &#092;"Sie2\"=>\"0\",
  53. 				 &#092;"Przodek wyswietli\"=>\"1\",
  54. 				 &#092;"Temat2\"=>\"\",
  55. 				 &#092;"Przodek sie2\"=>\"2\");
  56.    drzewo($tablica,&#092;"\",0);
  57.  
  58. ?>
[PHP] pobierz, plaintext


I zakończenie html:
[HTML] pobierz, plaintext 
  1. <br>
  2. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  3. ukryj();
  4. </SCRIPT>
  5. </body>
  6. </html>
[HTML] pobierz, plaintext


Skrypt ten (ale oczywiście zmodyfikowany) będe używał w pisanym przez siebie forum wątkowym
pwa
24.07.2005, 14:07:54
ciekawe rozwiazanie musze to przetrawic jakos biggrin.gif
FiDO
24.07.2005, 16:04:56
Moglbys jeszcze wystawic jakis przyklad jak to wyglada w akcji.. nie kazdemu chce sie przekopiowywac kod i sprawdzac smile.gif
Marcin_m
10.08.2005, 08:41:47
Miałem ten skrypt ulepszyć... ale wiecie jak to jest, robota wre a czasu na zabawy mało. W każdym razie w tym skrypcie najbardziej chciałem zwrócić uwagę na wykorzystanie java-script do generowania drzew, które można ładnie wykorzystać np. w wątkowych forach (jak swoje forum dokończe to wam pokaże). Tym czasem trzeba zrobić tak:

1). Wszystkie części java script i html złączyć w jeden plik i zainkludować gdzieś wewnątrz funkcje

2). Pod tą funkcją trzeba umieścić kod generujący drzewo który wygląda tak:
[PHP] pobierz, plaintext 
  1. <?php
  2.    $tablica=array("Temat"=>"",
  3. 				 "Przodek1_temat"=>"0",
  4. 				 "Przodek2_temat"=>"0",
  5. 				 "Przodek1_Przodek2_temat"=>"1",
  6. 				 "Temat2"=>"",
  7. 				 "Przodek1_Przodek2_temat"=>"2");
  8.    drzewo($tablica,"",0);
  9. ?>
[PHP] pobierz, plaintext


Robimy tak że Główne węzły drzewa nie mają wartości, natomiast liście mają wartość równą indeksowi w tablicy. Niestety powoduje to że tak skonstruowana funkcja nie może pobrać po prostu rekordów z bazy, no ale przecież można troche sie pobawić i to zmienić. Obiecuje że jak tylko ukończe forum, ta funkcja sie zmieni.

3). Stworzyć plik np. drzewo.php i wrzucić tam funkcje

plik index.php
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">
  4. </head>
  5. <body>
  6. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  7.  
  8. function ukryj()
  9. {
  10. var i=0;
  11. while(document.getElementById(i))
  12. {
  13. document.getElementById(i).style.display='none';
  14. zmiana=eval('document.formatka.node'+i+'');
  15. zmiana.value='+';
  16. Tablica_node[i]=0;
  17. i++;
  18. }
  19. }
  20.  
  21. function odkryj()
  22. {
  23. var i=0;
  24. while(document.getElementById(i))
  25. {
  26. document.getElementById(i).style.display='block';
  27. zmiana=eval('document.formatka.node'+i+'');
  28. zmiana.value='-';
  29. Tablica_node[i]=1;
  30. i++;
  31. }
  32. }
  33.  
  34.  
  35. var Tablica_node;
  36. Tablica_node=new Array(0);
  37.  
  38. function inode(value1)
  39. {
  40. if(!Tablica_node[value1])Tablica_node[value1]=0;
  41.  
  42. zmiana_znaczka=eval('document.formatka.node'+value1+'');
  43. wezel=eval('document.getElementById('+value1+')');
  44.  
  45. Tablica=new Array('+','-');
  46.  
  47. if(Tablica_node[value1]==0){
  48. zmiana_znaczka.value=Tablica[1];
  49.  
  50. wezel.style.display='block';
  51.  
  52. Tablica_node[value1]=1;
  53. }
  54. else{
  55. zmiana_znaczka.value=Tablica[0];
  56.  
  57. wezel.style.display='none';
  58.  
  59. Tablica_node[value1]=0;
  60.  
  61. }
  62. }
  63.  
  64. </SCRIPT>
  65. A skrypt działa tak:
  66.  
  67. <li>Korzeń drzewa tworzą osobniki nie posiadające przodków
  68. <li>ID osobnika jest równe jego pozycji w tablicy
  69. <li>Każdy osobnik tworzy tabele o ID=id_siebie
  70. <li>Każda kolejna tabela ma funkcje inode(x) gdzie x to ID odkrywanej tabeli
  71. <li>W ten sposób po ukryciu tabeli przodka, potomkowie nie ukryci wciąż
  72. pozostają odkryci (jak w systemie drzewiastym katalogów)
  73. <li>Skrypt niezwykle łatwo jest przystosować do wszystkiego
  74. <form name="formatka">
  75.  
  76. <!-- może być display=block i display=none -->
  77. <input onclick=odkryj() type=button value='Odkryj wszystko'>
  78. <input onclick=ukryj() type=button value='Ukryj wszystko'>
  79. <br>
  80. [php]
  81. <?php
  82.  include('drzewo.php');
  83.    =array("Temat"=>"",
  84. 				 "Przodek1_temat"=>"0",
  85. 				 "Przodek2_temat"=>"0",
  86. 				 "Przodek1_Przodek2_temat"=>"1",
  87. 				 "Temat2"=>"",
  88. 				 "Przodek1_Przodek2_temat"=>"2");
  89.    drzewo(,"",0);
  90. ?>[/php]
  91. <br>
  92. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  93. ukryj();
  94. </SCRIPT>
  95. </body>
  96. </html>
[HTML] pobierz, plaintext

plik drzewo.php
[PHP] pobierz, plaintext 
  1. <?php
  2.   /*
  3. 	@Autor: Marcin Makowski
  4. 	Skrypt generujący drzewo, z możliwością dynamicznego
  5. 	odkrywania i ukrywania potomków
  6.  
  7.   */
  8.  
  9.   /*
  10. 	Funkcja drzewo
  11. 	@arg Tablica - tablica asocjacyjna z przyporządkowanymi przodkami
  12. 	@arg Przodek - zawiera w sobie indeks tablicy przodka do wyswietlenia
  13. 	@arg Potomek - zawiera ilość potomków danego przodka, pomocny przy
  14. 				   wyświetlaniu drzewa
  15.   */
  16. function drzewo($tablica,$przodek,$potomek)
  17.   {
  18.   //$i - to indeks elementu tablicy
  19.   $i=0;
  20.   foreach($tablica as $tytul=>$pr)
  21. 	{
  22. 	   //Wyświetlamy z tablicy tylko danych przodków
  23. 	   if($pr==$przodek)
  24. 	  {
  25. 	   echo '<table border=0 height=20><tr><td width='.($potomek*10).'></td><td width=30>';
  26. 	   /*szukanie potomków
  27. 		 W tym celu kopiujemy tablice aby móc na niej operować
  28. 		*/
  29. 		$tablica2=$tablica;
  30. 		reset($tablica2);
  31. 		foreach($tablica2 as $tytul2=>$pr2)
  32. 		{
  33. 		  if($pr2==$i)
  34. 		  {
  35. 		  echo'<input onclick=inode('.$i.') type=button name="node'.$i.'" value="+">';
  36. 		  break;  //Jeżeli znaleziony to wyskakujemy
  37. 		  }
  38. 		}
  39. 	   echo'</td><td>'.$tytul."</td></tr></table>";
  40. 	   $potomek++;
  41. 	   echo'<table id='.$i.'><tr><td>';  //otwieramy tabele dla potomków o ID=indeks bieżącego osobnika
  42. 	   drzewo($tablica,"".$i."",$potomek);  //rekurencyjnie, szukamy potomków aktualnego osobnika
  43. 	   echo'</td></tr></table>';
  44. 	   $potomek--;
  45. 	  }
  46. 	   $i++;
  47. 	}
  48.   }
  49. ?>
[PHP] pobierz, plaintext

Przykład : DRZEWO-DZIAŁANIE
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.