<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Multiple Level Optgroup ⁄ >




clicks: 11767 11767 2008-05-31 2008-05-31 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This



A tag optgroup permite agrupar as opções, dividindo-as por tópicos para que se possa compreender melhor os vários itens e sub-itens, facilitando assim o seu uso.


Porém a tag optgroup não suporta sub-niveis multiplos, isto é, dentro da tag optgroup só é suportado a tag option, ou seja não podemos criar um outro sub-nivel. Mas ultrapassar esta "limitação" não é nada complicado.



Este snippet será baseado num que já tinha feito sobre Menus Recursivos, a ideia base foi retirada de lá. A estrutura SQL está explicada nesse snippet, mas é muito utilizada e de fácil entendimento, é baseada na relação "id->pai".

Basicamente o que será feito é ir construindo recursivamente o <select> e para denotarmos os sub-niveis vamos usando a indentação e cores para uma melhor percepção do que são nós (nodes) ou folhas (leafs)


- style.css
  1. *{padding: 0; margin: 0;}
  2.  
  3. body{
  4. font-family: Tahoma, Verdana, Arial, sans-serif;font-size: 62.5%;
  5. color: #000;background: #fff;text-align: justify;margin-top: .5em;
  6. }
  7.  
  8. div#container{
  9. margin: 0 auto;
  10. width: 30em;
  11. padding: .8em;
  12. border: solid 0.6em #3F4C6B;
  13. text-align: center;
  14. }
  15.  
  16. label, strong{font-size: 1.2em;color: #D01F3C;}
  17. strong{color: #356AA0 !important; font-weight: 900;}
  18.  
  19. select{border: solid .3em #F3AE48;font-size: 1.3em}
  20. select option.node{color: #B71313; font-weight:800;background-color: #EFEBCE;}




- esta será a estrutura da tabela e alguns dados de exemplo:
  1. -- Table "lista_produtos" DDL
  2.  
  3. CREATE TABLE `lista_produtos` (
  4. `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  5. `pai` tinyint(4) NOT NULL DEFAULT '0',
  6. `nome` varchar(50) NOT NULL DEFAULT '',
  7. PRIMARY KEY (`id`)
  8. ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
  9.  
  10.  
  11. -- Inserir valores
  12.  
  13. INSERT INTO lista_produtos (id, pai, nome) VALUES (1, 0, "Opção 1");
  14. INSERT INTO lista_produtos (id, pai, nome) VALUES (2, 0, "Opção 2");
  15. INSERT INTO lista_produtos (id, pai, nome) VALUES (3, 0, "Opção 3");
  16. INSERT INTO lista_produtos (id, pai, nome) VALUES (4, 0, "Opção 4");
  17. INSERT INTO lista_produtos (id, pai, nome) VALUES (5, 1, "Opção 1.1");
  18. INSERT INTO lista_produtos (id, pai, nome) VALUES (6, 2, "Opção 2.1");
  19. INSERT INTO lista_produtos (id, pai, nome) VALUES (7, 2, "Opção 2.3");
  20. INSERT INTO lista_produtos (id, pai, nome) VALUES (8, 2, "Opção 2.4");
  21. INSERT INTO lista_produtos (id, pai, nome) VALUES (10, 0, "Opção 5");
  22. INSERT INTO lista_produtos (id, pai, nome) VALUES (9, 10, "Opção 5.1");
  23. INSERT INTO lista_produtos (id, pai, nome) VALUES (11, 5, "Opção 1.1.1");
  24. INSERT INTO lista_produtos (id, pai, nome) VALUES (12, 3, "Opção 3.1");
  25. INSERT INTO lista_produtos (id, pai, nome) VALUES (13, 4, "Opção 4.1");
  26. INSERT INTO lista_produtos (id, pai, nome) VALUES (14, 8, "Opção 2.4.1");
  27. INSERT INTO lista_produtos (id, pai, nome) VALUES (15, 0, "Opção 6");
  28. INSERT INTO lista_produtos (id, pai, nome) VALUES (16, 14, "Opção 2.4.1.1");
  29. INSERT INTO lista_produtos (id, pai, nome) VALUES (17, 14, "Opção 2.4.1.2");
  30. INSERT INTO lista_produtos (id, pai, nome) VALUES (18, 8, "Opção 2.4.2");
  31. INSERT INTO lista_produtos (id, pai, nome) VALUES (19, 18, "Opção 2.4.2.1");
  32. INSERT INTO lista_produtos (id, pai, nome) VALUES (20, 18, "Opção 2.4.2.2");
  33. INSERT INTO lista_produtos (id, pai, nome) VALUES (21, 7, "Opção 2.3.1");
  34.  
  35.  




- functions.php, responsável pela criação do <select> e fazer a respectiva indentação;
  1. <?php
  2. /**
  3. * Construir Multiple-Level Optgroup
  4. *
  5. * @param String ID
  6. * @return String
  7. */
  8. function BuildDDList($id="ddListOptions"){
  9. $ddListItems=_BuildDDListItems("lista_produtos");
  10. return "
  11. <label for='$id'><strong>Opção</strong></label>
  12. <select name='$id' id='$id'>$ddListItems</select>
  13. ";
  14. }
  15.  
  16. /**
  17. * Construir item da lista
  18. *
  19. * @param Int Pertence a
  20. * @param Int Nivel de Profundidade
  21. * @param DBConnection Ligação à BD
  22. * @return String
  23. */
  24. function _BuildDDListItems($table, $parent=0, $level=0, $db_cnn=null){
  25. $indent = "";
  26. if(!$db_cnn){$db_cnn=_connectDB();}
  27.  
  28. for ($i=0; $i<$level; $i++){
  29. $indent.= _DummySpaces(4); //fazer indentação com 4 espaços
  30. }
  31.  
  32. $iSQL="
  33. Select
  34. `lp`.`id`,`lp`.`pai`,`lp`.`nome`,
  35. ( Select
  36. Count(*)
  37. From
  38. `$table` As `clp`
  39. Where
  40. `clp`.`pai`=`lp`.`id`
  41. ) As `num_sub_nodes`
  42. From
  43. `$table` As `lp`
  44. Where
  45. `lp`.`pai` = '$parent'
  46. ";
  47. $sql = mysql_query($iSQL,$db_cnn) or die (mysql_error());
  48. while ($myrow = mysql_fetch_array($sql)){
  49. //se fôr um nó, serão efectuadas algumas modificações
  50. if (_IsNode($myrow["num_sub_nodes"],$myrow["pai"])){
  51. $prefix="";
  52. $class='class="node"';
  53. }
  54. else{
  55. $prefix="-"._DummySpaces(1);
  56. }
  57.  
  58. //construir item
  59. $items.="<option value='$myrow[id]' $class>$indent$prefix$myrow[nome]</option>";
  60.  
  61. //chamar recursivamente a função
  62. $items.=_BuildDDListItems($table, $myrow["id"], $level+1,$db_cnn);
  63. }
  64. return $items;
  65. }
  66.  
  67. /**
  68. * Verificar se o registo é 1 nó
  69. *
  70. * @param Int
  71. * @param Int
  72. * @return Boolean
  73. */
  74. function _IsNode($num_nodes,$parent){ return ($num_nodes>0 || $parent==0);}
  75.  
  76. /**
  77. * Construir espaços (&nbsp;)
  78. *
  79. * @param Int Número
  80. * @return String
  81. */
  82. function _DummySpaces($num){
  83. for ($i=0;$i<$num;$i++) $dummy.="&nbsp;";
  84. return $dummy;
  85. }
  86.  
  87. /**
  88. * Efectuar ligação à BD
  89. *
  90. * @return DBConnection
  91. */
  92. function _connectDB(){
  93. $db = mysql_connect("localhost", "root", "");
  94. mysql_select_db("tech",$db) or die("Impossivel aceder à base de dados");
  95. return $db;
  96. }








- index.php
  1. <?php include_once("functions.php");?>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <title>A Multiple-Level Optgroup</title>
  8. <link rel="Stylesheet" href="style.css" type="text/css" />
  9. </head>
  10. <body>
  11. <div id="container">
  12. <?php
  13. echo BuildDDList();
  14. ?>
  15. </div>
  16. </body>
  17. </html>
  18.  




Este é um exemplo:




Qualquer erro/ dúvida é só dizer!









clicks: 11767 11767 2008-05-31 2008-05-31 goto mySnippets mySnippets php  Download  Bookmark This Bookmark This