Treeview - Albero

nofcfro · 2012-08-11T14:45:24+0200

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:

borgo italia · 2012-08-11T15:22:04+0200

ciao
prova a guardare
http://www.dynamicdrive.com/dynamicindex1/index.html
non sono sicuro, ma mi sembra di aver visto qualcosa di simile

nofcfro · 2012-08-11T16:08:42+0200

No

Sono tutti statici! A me servirebbe che si popolassero in base ai dati che ho nel database!

L'albero che fa al caso mio può essere così: http://www.destroydrop.com/javascripts/tree/default.html

borgo italia · 2012-08-11T16:30:45+0200

ciao
devi combinare il js con i dati che estrai dal db

nofcfro · 2012-08-11T16:55:02+0200

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>

borgo italia · 2012-08-11T17:49:16+0200

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 · 2012-08-11T18:02:59+0200

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

nofcfro · 2012-08-11T19:05:53+0200

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 · 2012-08-11T20:04:47+0200

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...

nofcfro · 2012-08-12T13:07:53+0200

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

borgo italia · 2012-08-12T14:20:09+0200

ciao
faccio delle prove, poi (spero) di saperti dire

borgo italia · 2012-08-13T09:15:39+0200

ciao
ho visto che nello zip c'è l'sql.
volevo sapere il js è completo? o manca qualcosa?

nofcfro · 2012-08-13T09:52:24+0200

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 · 2012-08-13T12:04:43+0200

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>

nofcfro · 2012-08-13T13:27:22+0200

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!

nofcfro · 2 Set 2012

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

borgo italia · 2 Set 2012

ciao
potresti provare così

PHP:

<?php
echo "d.add($numero_0,$passare_2,'$nome, $cognome, $indirizzo."<br />", $pensieri')";
?>

prova e dimmi che succede

nofcfro · 2 Set 2012

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:

Io credo che la soluzione sia nell'uso esatto di "/n"

borgo italia · 2 Set 2012

ciao
no, no ho capito quello che vorresti.
ma non penso che sia risolvibile con \n che è come il br

borgo italia · 2 Set 2012

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*/
}

Treeview - Albero

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Super Moderatore

Discussioni simili