Bonjour,

Je bloque sur des temps de performance de l'affichage de mon TreeView. Je me prend un timeout lorsque je dépasse les 5 500 résultats SQL.
Les données à affichées pour contruire le treeview sont supérieur à 8000 donées. Les données sont recupérées depuis SQL Server en ODBC.

Je pense avoir identifier le problème. Le problème vient de ma fonction de génération du treeview.
Dans ma fonction, je fais un treeview avec une boucle foreach qui parcours mon array de résultat. Puis, ensuite je fais appel de ma fonction dans ma fonction. Il y a donc plusieurs boucle foreach qui pose un problème au nvieau du temps d'execution.

Voici la fonction de génération du TreeView :

function generateTreeView($array, $currentParent, $appli, $currLevel = 0, $prevLevel = -1) {
     $nb_result = 0; $nb_db = 0; $treeviewValue = '';
        // Recherche dans le tableau et affectation des parent et des id
      foreach ($array as $categoryId => $category) {
            $nb_result++;
            $treeviewValue = ''; 
            //echo 'ok1';
          // Test sur la presence du parent
          if ($currentParent == $category['parent_id']) {
            // echo 'ok2';                      
              if ($currLevel > $prevLevel) echo " <ol class='tree' id='myOL'> "; 

              if ($currLevel == $prevLevel) echo " </li> ";

              if  (($category['appli'] == $appli) && ($category['name'] != 'Scheduler' || $category['name'] != 'No_Scheduler')){
                //$style = 'style="background: url(\'images/microsoft-access.png\') 15px 1px no-repeat;" '; // Modification du CSS pour les elements du Treeview ayant pour type d'application MS Access et changement des images
                $style = "images/microsoft-access.png";
                $treeviewValue =  date('H:i',strtotime($category['start_timestamp'])).' '.$category['name'];
              }else {
                //$style = 'style="background: url(\'images/database.png\') 15px 1px no-repeat;" '; // Modification du CSS pour les elements du Treeview n'ayant pas pour type d'application MS Access et changement des images
                $style = "images/database.png";
                $treeviewValue = date('H:i',strtotime($category['start_timestamp'])).' '.$category['name'];
                $nb_db++;
              }

              // Si les parents sont reconnus alors on ajoute une image devant le nom des parents
              if ($category['name'] == 'Scheduler' || $category['name'] == 'No_Scheduler'){
               // $style = 'style="color:blue; background: url(\'images/clock.png\') 15px 1px no-repeat;" '; // Modification du CSS pour les premiers niveau du Treeview et changement des images
               $style = "images/clock.png";
               $color = "color:blue;";
               $treeviewValue = $category['name'];
              }

              // $convertedCategory['name']= str_replace("'", "\&#039;", $category['name']);
              $convertedCategory['name']= str_replace(["'", '"'], ['\&#039;', '\&quot;'],$category['name']); // Remplacement des " et des ' dans le nom de la taches
              $convertedCategory['run']= str_replace(["'", '"'], ['\&#039;', '\&quot;'],$category['run']); // Remplacement des " et des ' dans le detail de la taches

              // Initialisation de la variable onclick permettant de mettre a jour et d'afficher les champs du details des taches
              $onclick = 'javascript:document.getElementById(\'image_detail\').src = \''.$style.'\';
                                     document.getElementById(\'trace_name\').innerHTML=\''.$convertedCategory['name'].'\';
                                     document.getElementById(\'trace_id\').innerHTML=\''.$category['id'].'\';
                                     document.getElementById(\'parent_id\').innerHTML=\''.$category['parent_id'].'\';
                                     document.getElementById(\'computer_name\').innerHTML=\''.$category['computer'].'\';
                                     document.getElementById(\'table_name\').innerHTML=\''.$category['table'].'\';
                                     document.getElementById(\'path\').innerHTML=\''.$category['path'].'\';
                                     document.getElementById(\'appli_name\').innerHTML=\''.$category['appli'].'\';
                                     document.getElementById(\'row_count\').innerHTML=\''.$category['rowc'].'\';
                                     document.getElementById(\'elasped_time\').innerHTML=\''.$category['elasped_time'].'\';
                                     document.getElementById(\'start_timestamp\').innerHTML=\''.$category['start_timestamp'].'\';
                                     document.getElementById(\'end_timestamp\').innerHTML=\''.$category['end_timestamp'].'\';
                                     document.getElementById(\'running\').innerHTML=\''.$convertedCategory['run'].'\';
                                     document.getElementById(\'error_msg\').innerHTML=\''.$category['error_msg'].'\';
                                     '; 

              //echo '<li> <label for="subfolder2" '.$style.' '.$onclick.'>'.$category['name'].' - '.$category['id'].'</label> <input type="checkbox" name="subfolder2" id='.'"'.$category['id'].'"'.' />';
              echo '<li> <label id="lblTree" for="subfolder2" style="'.$color.' background: url(\''.$style.'\') 15px 1px no-repeat;" onclick="'.$onclick.'">'.$treeviewValue.' </label> <input type="checkbox" name="subfolder2" id='.'"'.$category['id'].'"'.' />';

              // Test entre les different niveau. Si le niveau courant est superieur est superieur au niveau precedent alors le niveau courant devient le niveau precedent
              if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }      
              $currLevel++; 

              generateTreeView($array, $categoryId, $appli, $currLevel, $prevLevel);

              $currLevel--;               
          }   
      }
      if ($currLevel == $prevLevel) echo " </li>  </ol> ";

     echo "<script>document.getElementById('nb_result').innerHTML='".$nb_result."';</script>";
     echo "<script>document.getElementById('nb_db').innerHTML='".$nb_db."';</script>";
    }

J'ai choisi de faire le treeview avec une fonction PHP, mais je suis preneur de vos conseils si vous avez des framework JS ou des classes PHP qui permettent d'avoir un treeview à partir d'un array générer avec les résultat de requête ODBC.

Merci par avance pour votre aide.

Aucune réponse