Treeview - Albero

N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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:
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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:
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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)?
 
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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:)
 
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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...
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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:
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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! :(
 
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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>
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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:
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
potresti provare così
PHP: 
<?php
echo "d.add($numero_0,$passare_2,'$nome, $cognome, $indirizzo."<br />", $pensieri')";
?>

prova e dimmi che succede
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
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:
borgo italia

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
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*/
}
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
N Icone del Treeview - Menù ad Albero Javascript 2
felino [VBScript] [HP UFT] Iterare nodi di un TreeView (WPF) Visual Basic 0
G ACCESS 2013 controllo TreeView MS Access 0
WorldWideWeb Drag&Drop su TreeView Visual Basic 0
M Treeview form ASP.Net ASP.NET 1
M Problema gestione TreeView ASP.NET 0
N Struttura ad Albero di Directory _ PHP PHP 2
A Albero Categorie Esploso con Javascript Javascript 2
G albero categorie articolo sql Database 4
M [PHP] struttura ad albero PHP 1
_SAGO [Javascript] Albero di # Javascript 1
D Trasformazione da Albero 2-3 a B-Albero e viceversa e da Albero RB ad Albero 2-3 Programmazione 1
A Visualizzare albero DOM completo oppure Visualizzare Nodi che fanno parte di una Selezione Javascript 6
ypsilon86 gestire un albero genealogico con PHP e Mysql PHP 0
C flash cs4-effetto albero che cresce Flash 0
P menu albero Classic ASP 1
G Struttura ad albero binario PHP 0
S Menu ad albero non visualizzabile Javascript 2
M Aiuto per Modifica javascript prer menu ad albero Javascript 1
T problemi menu ad albero Javascript 0
B Menu ad albero Javascript 2

Discussioni simili

Alto Basso