Creer une arborecense a partir de donnees sql
Résolumont_dani Messages postés 232 Date d'inscription Statut Membre Dernière intervention -
Bonjour
J ai une table
id pais grupo cat sub_cat_1 sub_cat_2 sub_cat_3 nombre_variable titulo texto
1 ES NOSOTROS INICIO sin_sub sin_sub sin_sub carousel1 CAROUSEL1 ffffffffffffff
14 ES NOSOTROS INICIO sin_sub sin_sub sin_sub carousel2 carousel2 agua fresca y reposo para hacer bien el camino
3 IT NOSOTROS NOSOTROS sin_sub sin_sub sin_sub nosotros en italiano nosotros somos los de la
4 ES NOSOTROS QUE_ES historia casa sin_sub sin_sub historia_casa que es historia casa
5 ES NOTICIAS NOTICIAS NOTICIAS DE LA CANSERA la casa sub 3 du 25/5/58 noticias_du_01_01_2022 Notiica del 01/01/2022 este el las noticias del 01/01/2022
6 IT NOSOTROS INICIO sin_sub sin_sub sin_sub carousel1 italiano dskfhsdkhdfjkhsdklfh
7 ES NOSOTROS QUE_ES nuestro compromiso sin_sub sin_sub nuestro_compromiso nuestro compromiso
8 ES NOTICIAS NOTICIAS NOTICIAS DU CHEMIN sin_sub sin_sub noticias_du_chemin estadisticas estadistidacas del camino
9 ES NOTICIAS NOTICIAS NOTICIAS DE LA CANSERA la obra sin_sub noticias_obra las fachadas las nuevas obras d ela fachadas de la casa
10 ES NOTICIAS NOTICIAS NOTICIAS DE LA CANSERA sin_sub sin_sub noticias_obra-2 El porche en obra le nouveau porche d entree
11 ES NOTICIAS NOTICIAS meteo sin_sub sin_sub meteo la meteo el tiempo
12 FR NOTICIAS NOTICIAS INFO DE LA CANSERA les travaux sin_sub noticias_obra las facades les nouvelles facadesa d e la maison
13 ES NOSOTROS NOSOTROS sin_sub sin_sub sin_sub historia_casa historia de la casa la casa es de todo los tiem,po casa de acogida
15 ES NOTICIAS sin_sub sin_sub sin_sub sin_sub var_sin_sub titulo vide texte vide
16 ES NOTICIAS NOTICIAS sin_sub sin_sub sin_sub sin_kli categhoria vide categoria vide
Je voudrai obtenir l'arborecense suivante:
NOTICIAS (grupo)
- NOTICIAS (CAT)
- NOTICIAS DU CHEMIN (SUB_CAT)
*/* ESTADISTICAS (TEXTE)
- NOTICIAS DE LA CANSERA (SUB_CAT)
- NOTICIAS DE LA CANSERA (SUB_CAT)
- LA OBRA (SUB_CAT)
*/* ESTADISTICAS (TEXTE)
- LA CASA (SUB_CAT)
- SUB 3 DU 25/5/58 (SUB_CAT)
*/*noticia del 1/1/2022 (TEXTE)
- METEO (sub_cat)
*/* meteo (TEXTE)
J'ai préparé ceci:
$cat = $_POST["pestaña"]; echo "<table border='1' width='80%'>"; //AFFICHAGE DE LA CATEGORIE $liste_1 = $sql_texto-> prepare ('SELECT * FROM variables_textos WHERE grupo ="'.$cat.'" AND pais="ES" '); $liste_1->execute(); $res_1 = $liste_1->fetchAll(); foreach ( $res_1 as $row ) { $categoria = $row['cat']; $marge = 35; if($categoria != "sin_sub") { $categorie = $categoria; lignecategorie($marge, $categorie); $liste_2 = $sql_texto-> prepare ('SELECT * FROM variables_textos WHERE cat ="'.$categorie.'" AND pais="ES" '); $liste_2->execute(); while ($l_2 = $liste_2->fetch()) { $sub_cat_1 = $l_2['sub_cat_1']; $marge = 70; if($sub_cat_1 != "sin_sub") { $categorie = $sub_cat_1; lignecategorie($marge, $categorie); } } } else { $marge = 150; $titulo = $row['titulo']; //$titulo = $l_1_1['titulo']; lignetitulo($marge, $titulo); } } echo "</table>"; function lignecategorie($marge, $categorie) { ?> <tr> <td width='70%' > <span style='margin-left:<?php echo $marge;?>px'><?php echo $categorie;?></span> </td> <td></td> <td></td> <td></td> </tr> <?php } function lignetitulo($marge, $titulo) { ?> <tr> <td width='70%' > <span style='margin-left:<?php echo $marge;?>px'><?php echo $titulo;?></span> </td> <td></td> <td></td> <td></td> </tr> <?php }
Mais avec ceci le resultat est :
NOTICIAS
NOTICIAS DE LA CANSERA
NOTICIAS DU CHEMIN
NOTICIAS DE LA CANSERA
NOTICIAS DE LA CANSERA
meteo
NOTICIAS
NOTICIAS DE LA CANSERA
NOTICIAS DU CHEMIN
NOTICIAS DE LA CANSERA
NOTICIAS DE LA CANSERA
meteo
et ainsi de suite 4 fois.
Comment puis-je obtenir l'arborecense correct?
Ou est mon erreur?
Merci pour votre aide
- Creer une arborecense a partir de donnees sql
- Creer un groupe whatsapp a partir d'un autre groupe - Guide
- Créer un compte google - Guide
- Créer une adresse hotmail - Guide
- Créer une vidéo à partir de photos - Guide
- Créer une icone à partir d'une image - Guide
24 réponses
Bonjour,
Il existe de nombreux exemples sur le net permettant de transformer un array ( le résultat issu de ta base de données ) en "arborescence"
https://www.google.com/search?q=php+build+tree+from+array
Super ca fonctionne très bien.
J'ai du creer une table avec les ID parent de chaque categorie.
J'ai une liste qui est longue, aujourd'hui 50 lignes et evolutive avec 1 parent et 5 sous-parent.
Serait-il possible de mettre une fleche pour ouvrir et fermer les sous-parents afin d'afficher le contenu désiré.
Voici le code php
$result = $sql_test-> prepare ("SELECT id, categoria, link, parent, id_origine FROM arbol ORDER BY parent, categoria"); $result ->execute(); // Create an array to conatin a list of items and parents $menus = array( 'items' => array(), 'parents' => array() ); // Builds the array lists with data from the SQL result while ($items = $result->fetch(PDO::FETCH_ASSOC)){ // Create current menus item id into array $menus['items'][$items['id']] = $items; // Creates list of all items with children $menus['parents'][$items['parent']][] = $items['id']; } // Print all tree view menus echo createTreeView(0, $menus); echo "<br><br><br><br><br><br>"; function createTreeView($parent, $menu) { $html = ""; if (isset($menu['parents'][$parent])) { $html .= " <ul>"; foreach ($menu['parents'][$parent] as $itemId) { if(!isset($menu['parents'][$itemId])) { $html .= " <li> <table width='100%' border= '1px'><tr> <td style='background-color: #66FF33; color: black;'> <span >Noticias : ".$menu['items'][$itemId]['categoria']."</span> </td> <td width='150px'> <form action='' method='post' > <input type='text' id='escondido' name='id_a_modifcar' value='".$menu['items'][$itemId]['id_origine']."'> <input type='text' id='escondido' name='pestaña' value=''> <input type='submit' id='submit-validar' value='MODIFICAR'/> </form> </td> <td width='150px'> <form action='' method='post' > <input type='text' id='escondido' name='id_a_eliminar' value='".$menu['items'][$itemId]['id_origine']."'> <input type='text' id='escondido' name='pestaña' value=''> <input type='submit' id='submit-validar' value='ELIMINAR'/> </form> </td> </tr></table> </li> "; } if(isset($menu['parents'][$itemId])) { $html .= " <li> <table width='100%' border= '1px' ><tr> <td> <span>Categoria : ".$menu['items'][$itemId]['categoria']."</span> </span> </td> <td width='150px'> <form action='' method='post' > <input type='text' id='escondido' name='cat_a_crear_1' value=''> <input type='text' id='escondido' name='pestaña' value=''> <input type='submit' id='submit-validar' value='NUEVO ARTICULO'/> </form> </td> <td width='150px'> <form action='' method='post' > <input type='text' id='escondido' name='cat_a_crear_1' value=''> <input type='text' id='escondido' name='pestaña' value=''> <input type='submit' id='submit-validar' value='NUEVA CATEGORIA'/> </form> </td> </tr></table>"; $html .= createTreeView($itemId, $menu); $html .= "</li>"; } } $html .= "</ul>"; } return $html; }
Merci pour tes conseils
Merci Jordane.
Effectivement c'est exactement je que je cherchais.
Je me suis inspiré de ce tutoriel https://www.kodingmadesimple.com/2018/03/dynamic-treeview-menu-php-mysql-ajax.html
J'ai mon fichier fecth_categories qui est le suivant
<?php $db = mysqli_connect('localhost', 'root', '', 'variables_textos'); $sql = 'SELECT id, item_name as name, item_name as text, parent_id FROM tbl_categories'; $result = mysqli_query($db, $sql); $tree_data = mysqli_fetch_all($result, MYSQLI_ASSOC); foreach($tree_data as $k => &$v){ $tmp_data[$v['id']] = &$v; } foreach($tree_data as $k => &$v){ if($v['parent_id'] && isset($tmp_data[$v['parent_id']])){ $tmp_data[$v['parent_id']]['nodes'][] = &$v; } } foreach($tree_data as $k => &$v){ if($v['parent_id'] && isset($tmp_data[$v['parent_id']])){ unset($tree_data[$k]); } } echo json_encode($tree_data); ?>
qui a travers d'un print_r renvoi les données
et mon fichier index.html
<!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3 class="text-center bg-primary">Dynamic Treeview Example</h3> <div id="myTree"></div> </div> <div class="col-sm-8"> <!-- here goes other page contents --> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: 'fetch_categories.php', method: 'GET', dataType: 'json', success: function(data){ $('#myTree').treeview({data: data}); } }); }); </script> </body> </html>
Le treeview ne s'affiche pas.
Je suppose que le probleme viens du js / json.
Pourrais-tu m'aider?
Merci a l'avance
Pour t'aider, il faudrait aller regarder dans la console de ton navigateur ce qui est renvoyé par ton appel ajax.
De préférence en utilisant le navigateur : Firefox
il faut bien penser à activer le debug du XHR, puis réafficher ta page web
puis déplier la ligne qui correspond à ton appel ajax
NB: toi ça ne sera pas un POST mais un GET vu ton code JS
Le XHR est vide
Il y a une erreur : "NotFoundError: No such JSWindowActor 'DevToolsFrame'"
et plusieurs alertes CSS:
Error al interpretar el valor para '-webkit-text-size-adjust'. Declaración rechazada. bootstrap.min.css:5:117
Propiedad desconocida 'orphans'. Declaración rechazada. bootstrap.min.css:5:2685
Propiedad desconocida 'widows'. Declaración rechazada. bootstrap.min.css:5:2694
Propiedad desconocida '-moz-osx-font-smoothing'. Declaración rechazada. bootstrap.min.css:5:3638
Pseudo-clase o pseudo-elemento desconocido '-ms-input-placeholder'. Juego de reglas ignoradas debido a un mal selector. bootstrap.min.css:5:33922
ect ect...
oups le problème viendrait-il du bootstrap? Que signifie bootstrap.min.css:5: un numero?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questioncapture ecran console erreur ou toutes les errerus s'affichent sauf CSS
Pour " Par contre, une capture écran de ton appel ajax et des onglets requête et reponse pourraient nous être utiles.
Dans l'onglet reponse, regarde également si tu n'as pas un bouton "réponse brut" .. et si oui, active le...." je ne sias pas si c'est cela que tu me demande. Si non précise moi pour que je t'envoi le néssecaire.
Mes connaissance en JS sont très limitées.
J'ai fait ceci pour tenter de lire "un resultat":
console.log(' un resultat'), $(document).ready(function(){ $.ajax({ url: 'fetch_categories.php', method: 'GET', dataType: 'json', success: function(data){ $('#myTree').treeview({data: data}); } }); });
Je ne sai pas si cela est correct. Mais le resultat est rien ne s'affiche.
En reailté cela ne s'imprime pas a l'ecran mais apparait dans la console.
Mais si je le met dans ajax, il n'y a rien dans la console noi a l'ecran
Dans REPONSE j'ai le suivant:
Array
(
[id] => 2
[name] => Televisores
[text] => Televisores
[parent_id] => 1
[nodes] => Array
(
[0] => Array
(
[id] => 3
[name] => Tubo
[text] => Tubo
[parent_id] => 2
)
[1] => Array
(
[id] => 4
[name] => LCD
[text] => LCD
[parent_id] => 2
)
[2] => Array
(
[id] => 5
[name] => Plasma
[text] => Plasma
[parent_id] => 2
)
ect ect...
et dans REQUETE c'est vide
J'ai essayer d'afficher une simple variable.
Cela fonctionne si je la met dans uns autre script mais si je la laisse dan le script du traitement php /json cela ne fonctionne pas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3 class="text-center bg-primary">Dynamic Treeview Example</h3> <div id="myTree"></div> </div> <div class="col-sm-8"> <!-- here goes other page contents --> </div> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" ></script> <script type="text/javascript"> var nombre = 'un test'; document.write(nombre); </script> <script type="text/javascript"> var nombre = 'un autre test'; document.write(nombre); $(document).ready(function(){ $.ajax({ url: 'fetch_categories.php', method: 'GET', dataType: 'json', success: function(data){ $('#myTree').treeview({data: data}); }); }); </script> </body> </html>
Bonjour,
modifie ton code comme ceci
et regarde ce qui s'affiche dans la console du navigateur
<script type="text/javascript"> console.log("Le code JS se charge bien...") ; window.onload = function() { if (window.jQuery) { // jQuery is loaded console.log("Jquery OK"); } else { // jQuery is not loaded alert("JQUERY Doesn't Work !!!!"); } } $(document).ready(function(){ console.log("La page est terminée de charger.."); $.ajax({ url: 'fetch_categories.php', method: 'GET', dataType: 'json', success: function(data){ console.log('Ajax success',data); $('#myTree').treeview({data: data}); }, error: function(err){ console.log('Erreur Ajax',err); } ); }); </script>
NB: Pense bien à vider le cache du navigateur à chaque fois que tu modifies du code js ou css
Bonjour Jordane
Ton srcipt ne renvoit aucun message dans la console et il y a une erreur comme tu le vois dan l image ci après.
J'ai mis la première partie de ton script en début de page et oui les message s'affichent.

et voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> var nombre = 'un test'; document.write(nombre); console.log("Le code JS se charge bien... script en haut de page") ; window.onload = function() { if (window.jQuery) { // jQuery is loaded console.log("Jquery OK script en haut de page"); } else { // jQuery is not loaded alert("JQUERY Doesn't Work !!!! script en haut de page"); } } </script> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3 class="text-center bg-primary">Dynamic Treeview Example</h3> <div id="myTree"></div> </div> <div class="col-sm-8"> <!-- here goes other page contents --> </div> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" ></script> <script type="text/javascript"> console.log("Le code JS se charge bien... script en bas de page") ; window.onload = function() { if (window.jQuery) { // jQuery is loaded console.log("Jquery OK script en bas de page"); } else { // jQuery is not loaded alert("JQUERY Doesn't Work !!!! script en bas de page"); } } $(document).ready(function(){ console.log("La page est terminée de charger.."); $.ajax({ url: 'fetch_categories.php', method: 'GET', dataType: 'json', success: function(data){ console.log('Ajax success',data); $('#myTree').treeview({data: data}); }, error: function(err){ console.log('Erreur Ajax',err); } ); }); </script> </body> </html>
Bien sur en vidant le caché
EDIT : Ajout du LANGAGE dans les BALISES DE CODE afin d'avoir la COLORATION SYNTAXIQUE et la NUMEROTATION DES LIGNES. Merci d'y penser à l'avenir !!!
Nous progressons
voici le message dans la console
Le code JS se charge bien... script en haut de page
Le code JS se charge bien... script en bas de page
Jquery OK script en bas de page
La page est terminée de charger..
Erreur Ajax
Object { readyState: 4, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e), … }
E comment je fais pour regarder l'erreur qui se situe dans la réponse de mon Ajax pour voir de quoi il retourne.
Peux-tu m'aider?
Si je fais un print_r ($tmp_data) l'array s'affiche
voici un extrait
Array ( [1] => Array ( [id] => 1 [name] => Electr�nica [text] => Electr�nica [parent_id] => 0 [nodes] => Array ( [0] => Array ( [id] => 2 [name] => Televisores [text] => Televisores [parent_id] => 1 [nodes] => Array ( [0] => Array ( [id] => 3 [name] => Tubo [text] => Tubo [parent_id] => 2 ) [1] => Array ( [id] => 4 [name] => LCD [text] => LCD [parent_id] => 2 ) [2] => Array ( [id] => 5 [name] => Plasma [text] => Plasma [parent_id] => 2 ) ) ) [1] => Array ( [id] => 6 [name] => Ordenadores y port�tiles [text] => Ordenadores y port�tiles [parent_id] => 1 [nodes] => Array ( [0] => Array ( [id] => 7 [name] => Escritorios [text] => Escritorios [parent_id] => 6 ) [1] => Array ( [id] => 8 [name] => Ordenadores port�tiles [text] => Ordenadores port�tiles [parent_id] => 6 ) [2] => Array ( [id] => 9 [name] => Netbooks [text] => Netbooks [parent_id] => 6 ) [3] => Array ( [id] => 10 [name] => Tabletas [text] => Tabletas [parent_id] => ect...
Par ailleurts j'ai cherché un peu d'info sur l'erreur indiquer. J'ai trouvé que si je pouvais remplacer dataType: 'json' par dataType: 'text'.
L'erreur disparait el j'ai comme message :
Ajax success <empty string>
Ton plugin attend un objet JSON.
Il faut donc laisser le type "json".
Par contre, ton retour ajax ne semble pas bon....
A croire que tu n'as plus le json_encode ....
Tu peux ajouter cette ligne au début de ton script php
header("Content-Type: application/json; charset=UTF-8");
Si ça ne fonctionne toujours pas après ça... n'oublie pas de nous reparter COMPLETEMENT ton code.
Bonjour Jordana
effectivement dans l'onglet JSON de la fenetre qui s'affiche ¡,j'ai
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
et voici le fichier index_new.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" ></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3 class="text-center bg-primary">Dynamic Treeview Example</h3> <div id="myTree"></div> </div> <div class="col-sm-8"> <!-- here goes other page contents --> </div> </div> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ console.log("La page est terminée de charger.."); $.ajax({ url: 'fetch_categories.php', method: 'get', dataType: 'json', success: function(reponse){ console.log('Ajax success',reponse); $('#myTree').treeview({data: reponse}); }, error: function(err){ console.log('Erreur Ajax',err); }} ); }); </script>
et le fichier fetch_categories.php
$db = mysqli_connect('localhost', 'root', '', 'variables_textos');
$tree_data=array();
$sql = 'SELECT id, item_name as name, item_name as text, parent_id FROM tbl_categories';
$result = mysqli_query($db, $sql);
$tree_data = mysqli_fetch_all($result, MYSQLI_ASSOC);
foreach($tree_data as $k => &$v){
$tmp_data[$v['id']] = &$v;
}
foreach($tree_data as $k => &$v){
if($v['parent_id'] && isset($tmp_data[$v['parent_id']])){
$tmp_data[$v['parent_id']]['nodes'][] = &$v;
}
}
foreach($tree_data as $k => &$v){
if($v['parent_id'] && isset($tmp_data[$v['parent_id']])){
unset($tree_data[$k]);
}
}
echo " print r<br>";
print_r($tree_data);// ici l'array s'affiche
echo "<br>print r json<br>";
print_r(json_encode($tree_data));// ici l'array ne s'affcihe pas
echo json_encode($tree_data);
Merci beaucoup pour tout ce soutien, avec ton aide j'apprend peu a peu. MERCI
Pour l'instant je suis en local avec wamp.
Je viens d'essayer de le passer sur serveur et c'est pareil au niveau de l'affichage et de l'erreur :
SI tu veux voir en direct https://lacanseradelcamino.com/lacansera/arbol/index_new.php