Creer une arborecense a partir de donnees sql

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

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?

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.

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

Je suis en local avec Wamp.

J ai changé les lien en http et voici la console

oups...

voici la console

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

Si je met $tmp_data reponse 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> 

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?

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

Voic la liste des extension php