Treeview - Albero

Discussione in 'Javascript' iniziata da nofcfro, 11 Agosto 2012.

  1. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Salve,
    volevo sapere come fosse possibile realizzare (se avete qualche link, spezzone di codice...) il classico menù ad albero tenendo presente che le categorie e le sottocategorie sono prese dal database e che a sinistra della scritta sia presente il classico quadratino con il + se il menù è espandibile e - se non lo è.

    |+| Categoria
    ---|+| Sottocategoria
    -------|-| Prodotto 1

    Grazie :beer:
     
  2. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
  3. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Ultima modifica: 11 Agosto 2012
  4. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    devi combinare il js con i dati che estrai dal db
     
  5. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Il file che ti fa scaricare quel sito che qui per comodità allego: Vedi l'allegato alberof.zip

    Praticamente si tratterebbe di rendere dinamico solamente questo pezzo, ma come??? :(

    HTML:
    <script type="text/javascript">		<!--
    
    
    		d = new dTree('d');
    
    
    		d.add(0,-1,'My example tree');
    		d.add(1,0,'Node 1','example01.html');
    		d.add(2,0,'Node 2','example01.html');
    		d.add(3,1,'Node 1.1','example01.html');
    		d.add(4,0,'Node 3','example01.html');
    		d.add(5,3,'Node 1.1.1','example01.html');
    		d.add(6,5,'Node 1.1.1.1','example01.html');
    		d.add(7,0,'Node 4','example01.html');
    		d.add(8,1,'Node 1.2','example01.html');
    		d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    		d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
    		d.add(11,9,'Mom\'s birthday','example01.html');
    		d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
    
    
    		document.write(d);
    
    
    		//-->
    	</script>
     
    Ultima modifica: 11 Agosto 2012
  6. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    sto cercando di capire la logica con cui si formano i link livelli e sottolivelli.
    poi dimmi: hai solo tre livelli? categoria/sottocategoria/prodotto ?
    e hai tre tabelle tra loro collegate dagli id?
    non ultimo: usi php (spero)?
     
  7. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    penso di aver capito la logica, se (dopo esserti fatto le copie di riserva) provi a sostituire questo a quello che mi hai postato

    HTML:
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    
    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','example01.html');
    	d.add(2,1,'Node 1.1','example01.html');
    		d.add(3,2,'Node 1.1.1','example01.html');
    			d.add(4,3,'Node 1.1.1.1','example01.html');
    	d.add(5,1,'Node 1.2','example01.html');
    
    d.add(6,0,'Node 2','example01.html');
    d.add(7,0,'Node 3','example01.html');
    d.add(8,0,'Node 4','example01.html');
    
    d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    		d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
    		d.add(11,9,'Mom\'s birthday','example01.html');
    d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
    
    document.write(d);
    //-->
    </script>
    e verificare che venga fuori la stessa cosa, se si ho capito. (non considerare l'indentatura l'ho fatta per cercare di capire)
    aspetto le risp anche al precdente, poi (se ho capito) ti mando come intregrarlo con i dati sel db rendendolo dinamico
     
  8. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Uso PHP (mentre non conosco bene javascript), le tabelle sono collegate dagli id (chiave primaria), i livelli sono solamente tre!


    Lo schema è questo:

    |+| Categoria 1
    ---|+| SottoCategoria A
    ----|-|Prodotto AA1
    ----|-|Prodotto AA2
    ----|-|Prodotto AA3
    ---|+| SottoCategoria B
    ----|-|Prodotto BB1
    ----|-|Prodotto BB2
    ----|-|Prodotto BB3

    |+| Categoria 2
    ---|+| SottoCategoria C
    ----|-|Prodotto CC1
    ----|-|Prodotto CC2
    ----|-|Prodotto CC3
    ---|+| SottoCategoria D
    ----|-|Prodotto DD1
    ----|-|Prodotto DD2
    ----|-|Prodotto DD3

    La tabella Categoria sarà intuitivamente composta così:
    id_cat
    nome_cat (es. Condomini)

    La tabella Sottocategoria:
    id_scat
    id_cat
    nome_scat (es. inquilini)

    La tabella Prodotti:
    id_prod
    id_cat
    id_scat
    nome_prod (es. stanze della casa)

    Quindi ogni nodo non sarà preimpostato ma dovrà essere generato dal database! :)
    Io pensavo di mettere un ciclo WHILE per generare tutti gli array, però la complicazione sta nel dirgli che nodo deve avere!!
    Grazie per il tempo:)
     
  9. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    prova a guardare, considera comunque che è un'idea e non so se funzi.
    comunque verifica i nomi dei campi li ho messi un po' a caso e per cercare di far capire cosa estraggo
    PHP:
    <?php
    //i dati di connessione
    //trasformo tutto il js in php
    echo "
    <script type=\"text/javascript\">
    d = new dTree('d');
    d.add(0,-1,'men&ugrave;');
    "
    ;
    $q_1=mysql_query("SELECT * FROM categorie ORDER BY categoria");
    $numero_0=1;
    //$livello=0;
    while($ri_1=mysql_fetch_array($q_1)){
        
    $livello=0;//metto il livello a zero, e riperto da 0 dopo aver elencato i prodotti
        
    $categoria=$ri_1['categoria'];
        
    $id_cat=$ri_1['id'];
        echo 
    "d.add($numero_0,$livello,'$categoria','tua_pagina.php');";//non so cosa ci deve andare al posto di tua_pagina
        
    $numero_0++;//incremento di uno
        
    $livello++;//incremento di uno diventa 1
        
    $q_2=mysql_query("SELECT * FROM sottocategoria WHERE id_categoria=$id_cat ORDER BY sottocategoria");
        while(
    $ri_2=mysql_fetch_array($q_2)){
            
    $sotto_categoria=$ri_2['sottocategoria'];
            
    $id_sotto=$id_cat=$ri_1['id_sotto'];
            echo 
    "d.add($numero_0,$livello,'$sotto_categoria','tua_pagina.php');";//non so cosa ci deve andare al posto di tua_pagina
            
    $numero_0++;//incremento di uno
            
    $livello++;//incremento di uno diventa 2
            
    $q_3=mysql_query("SELECT * FROM prodotti WHERE id_categoria=$id_cat AND id_sotto=$id_sotto ORDER BY nome_prodotto");
            while(
    $ri_3=mysql_fetch_array($q_3)){
                
    $nome_prodotto=$ri_2['nome_prodotto'];
                
    $id_prod=$ri_2['id_prodotto'];//questo può servirti se devi fare il link alla scheda prodotto
                //vedi sotto
                
    echo "d.add($numero_0,$livello,'$nome_prodotto','scheda_prodotto.php?id=$id_prod');";
                
    $numero_0++;//incremento di uno
                //qui non serve incrementare il livello
            
    }
        }
    }
    echo 
    "
    document.write(d);
    </script>
    "
    ;
    ?>
    poi ho usato le vecchie query, se la conosci è meglio che tu passi alla PDO

    p.s.
    da quello che ho capito in d.add(primo numero,secondo numero,..... il
    primo numero è un numero progressivo che si incrementa di uno ad ogni link
    secondo numero è il livello con 0 il primo, 1 il secondo ....

    se non funzia non mandarmi...
     
  10. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Innanzitutto GRAZIE per il tempo :)
    C'è qualcosa che non va perché già dalla prima riga prende solamente una categoria (es. solo musica invece che musica e letteratura) invece che tutte :(
    Ho creato un piccolo file SQL così diviso per fare delle prove, sperando che un lavoro del genere possa interessare parecchie persone:

    CATEGORIA:
    Musica
    Letteratura

    SOTTOCATEGORIA:
    Pop
    Metal
    Italiana
    Inglese


    PRODOTTI:
    Abba
    Beatles
    Slayer
    Metallica
    Pirandello
    Verga
    Joyce
    Orwell


    Allego il file: Vedi l'allegato esempio.zip
     
    Ultima modifica: 12 Agosto 2012
  11. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    faccio delle prove, poi (spero) di saperti dire
     
  12. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    ho visto che nello zip c'è l'sql.
    volevo sapere il js è completo? o manca qualcosa?
     
  13. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Il file SQL l'ho postato per semplificare il lavoro a chi volesse smanettare col codice che mi hai postato :)

    Il javascript ancora non funziona bene: se copio solo la prima istruzione

    PHP:
    echo 
    <script type=\"text/javascript\"> 
    d = new dTree('d'); 
    d.add(0,-1,'men&ugrave;'); 
    "

    $q_1=mysql_query("SELECT * FROM categorie ORDER BY categoria"); 
    $numero_0=1
    //$livello=0; 
    while($ri_1=mysql_fetch_array($q_1)){ 
        
    $livello=0;//metto il livello a zero, e riperto da 0 dopo aver elencato i prodotti 
        
    $categoria=$ri_1['categoria']; 
        
    $id_cat=$ri_1['id']; 
        echo 
    "d.add($numero_0,$livello,'$categoria','tua_pagina.php');";//non so cosa ci deve andare al posto di tua_pagina 
        
    $numero_0++;//incremento di uno 
        
    $livello++;//incremento di uno diventa 1 
    Non mi stampa ogni nome_cat nella tabella Categorie, ma solamente il primo! :(
     
  14. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    EUREKA!!!
    comunque nello script che ti avevo inviato prima c'erano degli errori di sintassi (es $sotto_categoria=$ri_1['nome_scat'] al posto di $sotto_categoria=$ri_2['nome_scat'] errori di copy/paste)
    PHP:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>menu ad albero</title>
    <link rel="StyleSheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="dtree.js"></script>
    </head>
    <body>
    <div class="dtree">
    <p><a href="javascript: d.openAll();">apri tutto</a> | <a href="javascript: d.closeAll();">chiudi tutto</a></p>
    <?php
    /*
    CATEGORIA:
    Musica
    Letteratura
    SOTTOCATEGORIA:
    Pop
    Metal
    Italiana
    Inglese
    PRODOTTI:
    Abba
    Beatles
    Slayer
    Metallica
    Pirandello
    Verga
    Joyce
    Orwell
    */
    //*** qui devi mettere i tuoi dati di connessione
    $host 'localhost';     //nome host
    $username 'root';      //user name
    $password 'password';  //password
    $db 'prove';            // nome data base
    //---connessione----------------------------------------------------
    $conn = @mysql_connect($host,$username,$password) or die (mysql_error());
    $sel = @mysql_select_db($db) or die (mysql_error());
    //trasformo tutto il js in php
    echo "
    <script type=\"text/javascript\">
    d = new dTree('d');
    d.add(0,-1,'men&ugrave;');
    "
    ;
    $q_1=mysql_query("SELECT * FROM tblcategorie ORDER BY nome_cat");
    $numero_0=1;
    //$livello=0;
    while($ri_1=mysql_fetch_array($q_1)){
        
    $livello=0;//metto il livello a zero, e riperto da 0 dopo aver elencato i prodotti
        
    $categoria=$ri_1['nome_cat'];
        
    $id_cat=$ri_1['id_cat'];
        echo 
    "d.add($numero_0,$livello,'$categoria');\n";//ho tolto il link
        
    $passare_1=$numero_0;//collega il sottolivello al livello superiore
        
    $numero_0++;//incremento di uno
        
    $q_2=mysql_query("SELECT * FROM tblsottocategorie WHERE id_cat=$id_cat ORDER BY nome_scat");
        while(
    $ri_2=mysql_fetch_array($q_2)){
            
    $sotto_categoria=$ri_2['nome_scat'];
            
    $id_sotto=$ri_2['id_scat'];
            echo 
    "d.add($numero_0,$passare_1,'$sotto_categoria');\n";//ho tolto il link
            
    $passare_2=$numero_0;
            
    $numero_0++;//incremento di uno
            
    $q_3=mysql_query("SELECT * FROM tblprodotti WHERE id_cat=$id_cat AND id_scat=$id_sotto ORDER BY nome_prod");
            while(
    $ri_3=mysql_fetch_array($q_3)){
                
    $nome_prodotto=$ri_3['nome_prod'];
                
    $id_prod=$ri_3['id_prod'];//questo può servirti se devi fare il link alla scheda prodotto
                //vedi sotto
                
    echo "d.add($numero_0,$passare_2,'$nome_prodotto','scheda_prodotto.php?id=$id_prod');\n";
                
    $numero_0++;//incremento di uno
            
    }
        }
    }
    echo 
    "
    document.write(d);
    </script>
    "
    ;
    ?>
    </div>
    </body>
    </html>
     
  15. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    SEI UN MITO!

    Grazie per il tempo e per la soluzione, spero sia utile al maggior numero di utenti di questo forum!
    Grazie Grazie Grazie! :D
     
  16. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Ciao :)
    Se la stringa
    PHP:
    echo "d.add($numero_0,$passare_2,'$nome$cognome$indirizzo$pensieri');\n";
    diventa troppo lunga, è possibile andare a capo (ad esempio mettere $pensieri sotto)?
    Se uso <br> o <p> o <div> o <table> ci sono dei problemi grafici, se uso "\n" mi dà errore :(

    Senza titolo-1.jpg
     
    Ultima modifica: 2 Settembre 2012
  17. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    potresti provare così
    PHP:
    <?php
    echo "d.add($numero_0,$passare_2,'$nome$cognome$indirizzo."<br />", $pensieri')";
    ?>
    prova e dimmi che succede
     
  18. nofcfro

    nofcfro Utente Attivo

    Registrato:
    27 Maggio 2012
    Messaggi:
    72
    Mi Piace Ricevuti:
    0
    Punteggio:
    6
    Non funziona :(
    Il problema è che se metto <br> e simili va a capo ma spezzando i "puntini dell'albero"; a me servirebbe che andasse a capo ma sotto la variabile $nome!
    E' un po' difficile da spiegare, non so se sono stato chiaro :)

    L'errore grafico con <br> e simili è questo:
    Senza titolo-2.jpg

    Io credo che la soluzione sia nell'uso esatto di "/n"
     
    Ultima modifica: 2 Settembre 2012
  19. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    no, no ho capito quello che vorresti.
    ma non penso che sia risolvibile con \n che è come il br
     
  20. borgo italia

    borgo italia Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    4 Febbraio 2008
    Messaggi:
    16.025
    Mi Piace Ricevuti:
    146
    Punteggio:
    63
    Sesso:
    Maschio
    Località:
    PR
    Home Page:
    ciao
    penso che tu debba operare sul css cercando dove definisce il tag li e provare ad aggiungere sia la larghezza che word-wrap

    Codice:
    li{
    	width:11em; /*o altra misura*/
    	word-wrap:break-word;/* prova al posto di break-word anche normal*/
    }
     
Sto caricando...

Condividi questa Pagina