Creer une arborecense a partir de donnees sql
Résolu/Fermémont_dani Messages postés 232 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 7 mai 2024 - 4 mars 2023 à 19:12
- Creer une arborecense a partir de donnees sql
- Creer un groupe whatsapp a partir d'un autre groupe - Guide
- Créer un compte gmail - Guide
- Créer un compte google - Guide
- Créer une adresse hotmail - Guide
- Créer une liste déroulante excel - Guide
24 réponses
25 févr. 2023 à 20:19
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
28 févr. 2023 à 20:12
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
28 févr. 2023 à 21:20
Pour ça, il te faudra utiliser du Javascript.
Là aussi, de nombreux scripts / tutos / exemples existent pour ça ....
Il te suffit de chercher javacript treeview
1 mars 2023 à 16:04
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
1 mars 2023 à 16:31
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
1 mars 2023 à 19:22
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?
1 mars 2023 à 21:09
Tout ce qui concerne le css n'a pas d'interêt pour ton souci.
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....
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionModifié le 2 mars 2023 à 07:47
capture 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.
2 mars 2023 à 08:36
Ta console n'affiche pas grand chose .. même pas l'appel ajax ...
Ajoutes des console.log dans ton code JS pour voir si il s'affichent... sans ça .. pas de debug possible !
2 mars 2023 à 09:24
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.
2 mars 2023 à 12:44
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
2 mars 2023 à 14:03
tu bosses en local ou sur un serveur ?
Si en local, change les liens qui sont en https pour le mettre en http sinon tu peux avoir des blocages
2 mars 2023 à 14:40
Je suis en local avec Wamp.
J ai changé les lien en http et voici la console
2 mars 2023 à 14:48
là... ce n'est pas la console que tu nous montres mais l'inspecteur....
2 mars 2023 à 15:11
oups...
voici la console
2 mars 2023 à 15:49
et donc, si tu déplies le get (pas celui qui est rouge... l'autre en dessous )
Tu as quoi dans les onglets REPONSE et REQUETE
2 mars 2023 à 16:21
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
2 mars 2023 à 16:32
c'est mieux.
par contre, dans ton php tu retournes $tree_data alors que ça ne devrait pas être $tmp_data que tu devrais retourner ?
2 mars 2023 à 20:24
Si je met $tmp_data reponse est vide
3 mars 2023 à 07:09
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>
3 mars 2023 à 10:30
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
3 mars 2023 à 10:35
Après.... on a vu que ton appel ajax se faisait bien
Le souci se trouve désormais dans le code php
Tu ne renvois pas les données dans le format attendu par ton plugin de treeview ... à toi d'adapter le code php pour que ça te retourne ce qui est attendu !
Modifié le 3 mars 2023 à 13:22
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 !!!
3 mars 2023 à 13:23
Ligne 73 il manque une accolade fermante avant la parenthèse ( pour fermer le $ajax ({ )
3 mars 2023 à 17:35
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), … }
3 mars 2023 à 18:08
Tu dois donc regarder l'erreur qui se situe dans la réponse de ton Ajax pour voir de quoi il retourne.
3 mars 2023 à 19:19
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>
3 mars 2023 à 19:45
en continuant mes recherches j'ai declaré $tree_data=array() qui ne l'était pas et j'ai passé le dataType: 'json' a dataType: 'text',
voici le resultat
mais l'arborescence ne s'affiche toujours pas même si j'ai l'impression que la solution est plus proche.
Aurais-tu une idée?
3 mars 2023 à 20:45
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.
4 mars 2023 à 07:31
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
4 mars 2023 à 09:08
Ah mais.... Faut virer tous les echo.. print_r..
Et ne garder que le echo json_encode...
Sinon c'est normal que ça ne marche pas.
4 mars 2023 à 09:56
Avec ou sans les echo print-r ca ne fonctionne pas debuit le début
Modifié le 4 mars 2023 à 08:07
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
4 mars 2023 à 09:15
Voic la liste des extension php
4 mars 2023 à 09:23
mais on s'en fou ....
Je ne t'ai rien demandé à ce sujet ....
As tu lu ma réponse précédente ????
4 mars 2023 à 09:58
Tu t'en fou peut etre, mais moi avec mes petites connaissances, j'essai de comprendre et de trouver le pourquoi.
Désolé si mes bonnes intentions se traduisent en erreur grossière
4 mars 2023 à 10:34
Que tu cherches de ton côté c'est très bien et même conseillé....
Mais si personne ne t'a rien demandé sur les extensions ça tombe un peu comme un cheveu sur la soupe ..