Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Generator drzewek (PHP+JS), Funkcja, PHP 4 i 5
Marcin_m
post
Post #1





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 1.06.2005

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Marcin_m
post
Post #2





Grupa: Zarejestrowani
Postów: 35
Pomógł: 0
Dołączył: 1.06.2005

Ostrzeżenie: (0%)
-----

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

Ten post edytował Marcin_m 10.08.2005, 08:43:33
Go to the top of the page
+Quote Post

Posty w temacie
- Marcin_m   Generator drzewek (PHP+JS)   7.06.2005, 17:26:10
- - pwa   ciekawe rozwiazanie musze to przetrawic jakos   24.07.2005, 14:07:54
- - FiDO   Moglbys jeszcze wystawic jakis przyklad jak to wyg...   24.07.2005, 16:04:56
- - Marcin_m   Miałem ten skrypt ulepszyć... ale wiecie jak to je...   10.08.2005, 08:41:47

« Następny starszy · Algorytmy, klasy, funkcje · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 26.12.2025 - 06:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn