Ankündigung

Einklappen
Keine Ankündigung bisher.

JavaScript in HTML ändern via PHP, Listen-Verschachtelung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JavaScript in HTML ändern via PHP, Listen-Verschachtelung

    Hallo, liebe PHPler!

    Aus einem JavaScript-Code möchte ich mittels PHP HTML-Code machen. Der Ursprung des JavaScript-Codes ist ein Modul in Joomla. Dieses Modul erzeugt eine Navigation in JavaScript. Ich möchte die Navigation jedoch gerne als HTML-Liste.

    Mein Problem ist hierbei, die Navigationspunkte in der HTML-Liste korrekt zu verschachteln und zu hierarchisieren.

    Ausgangscode (Beispiel):
    Code:
    jgTreeView216.add(2, -1, 'Kostenlose Ausmalbilder für Kinder', '/kinder/ausmalbilder/ausmalbilder.html', 'false');
    jgTreeView216.add(6, 2, 'Ausmalbilder Blumen', '/kinder/ausmalbilder/blumen.html', 'false');
    jgTreeView216.add(3, 2, 'Ausmalbilder Fahrzeuge', '/kinder/ausmalbilder/fahrzeuge.html', 'false');
    jgTreeView216.add(5, 2, 'Ausmalbilder Obst und Gemüse', '/kinder/ausmalbilder/obst-und-gemuese.html', 'false');
    jgTreeView216.add(4, 2, 'Ausmalbilder Tieren', '/kinder/ausmalbilder/tiere.html', 'false');
    jgTreeView216.add(9, 3, 'Ausmalbilder Autos', '/kinder/ausmalbilder/autos.html', 'false');
    jgTreeView216.add(8, 4, 'Ausmalbilder Hunde', '/kinder/ausmalbilder/hunde.html', 'false');
    jgTreeView216.add(10, 3, 'Ausmalbilder LKWs', '/kinder/ausmalbilder/lkws.html', 'false');
    jgTreeView216.add(7, 4, 'Ausmalbilder Pferde', '/kinder/ausmalbilder/pferde.html', 'false');
    Der relevante Inhalt der Klammern hat folgende Bedeutung:
    ID der Kategorie, ID der übergeordneten Kategorie, Name der Kategorie, URL der Kategorie
    Im Prinzip ist also die Info vorhanden, welche Kategorie welcher anderen Kategorie untergeordnet ist.

    Der Code des obigen Beispiels sollte in HTML so aussehen:
    (beachte auch die Verschachtelung und die alphabetische Sortierung; die URLs lasse ich der Übersichtlichkeit halber mal weg):
    Code:
    <ul>
    <li>Ausmalbilder Blumen</li>
    <li>Ausmalbilder Fahrzeuge
    <ul><li>Ausmalbilder Autos</li>
    <li>Ausmalbilder LKWs</li></ul></li>
    <li>Ausmalbilder Tiere
    <ul><li>Ausmalbilder Hunde</li>
    <li>Ausmalbilder Pferde</li></ul></li>
    </ul>
    Bisher kann ich die JavaScript-Zeilen schon in eine HTML-Liste umwandeln. Aber eine Logik für die korrekte Verschachtelung und Sortierung bekomme ich nicht hin.

    Mein bisheriger Ansatz sieht wie folgt aus:

    PHP-Code:
    <ul>
    <?php
      $tmpGesamt 
    $jgTreeviewHelper->buildTreeview($jgcat_rows); // Gesamtstruktur; Input von Joomla-Modul
      
    $tmpZeilen explode("\n"$tmpGesamt); // Input in Zeilen zerlegen
      
      
    $tmpZeilenOK = array();
      
    $kategorien = array();
      
    $oberkategorienTmp = array();
      
      foreach(
    $tmpZeilen as $tmpZeile){ // 1. Durchlauf, um alle Kategorie-IDs zu ermitteln
        
    $tmpSucheUrl strpos($tmpZeile"html"); // nur Zeilen berücksichtigen, die einen URL enthalten
        
    if ($tmpSucheUrl !== false) {
          
          
    $tmpZeilenOK[] = $tmpZeile// Array aus relevanten Zeilen erstellen (für später)
          
          
    $treffer1 explode("("$tmpZeile); // Kategorie-ID = zwischen erster Klammer und ...
          
    $treffer2 explode(","$treffer1[1]); // ... erstem Komma
          
    $kategorien[] = $treffer2[0]; // -> Array der Kategorie-IDs
          
          
    $treffer3 explode(","$tmpZeile);
          
    $oberkategorienTmp[] = str_replace(" """$treffer3[1]);
          
    $oberkategorien array_unique($oberkategorienTmp); // -> Array der Oberkategorie-IDs
        
    }
      }
      
      foreach(
    $tmpZeilenOK as $tmpZeileOK){ // 2. Durchlauf, um Listenpunkte auszugeben
        
    $tmpTeile explode("'"$tmpZeileOK);
          
        
    $KatID explode(","$tmpTeile[0]);
        
    $KatIDselbst explode("(",$KatID[0]); // ID der aktuellen Kategorie
        
    $KatIDober str_replace(" """$KatID[1]); // ID der jeweiligen Oberkategorie
        
        // Da ich keine korrekte Verschachtelung hinbekomme, könnte ich zumindest mit CSS-Einrückungen arbeiten. Allerdings ist dann immer noch die Sortierung der Kategorien falsch.
        
    if (in_array($KatIDselbst[1], $oberkategorien)) {
          
    $cssclass "oberkategorie";
        } else {
          
    $cssclass "unterkategorie"
        }
          
        echo 
    "<li class=\"".$cssclass."\"><a href=\"".$tmpTeile[3]."\">".$tmpTeile[1]."</a></li>\n";
          
      }
      
    ?>
    </ul>
    Konnte ich mein Problem einigermaßen verdeutlichen?
    (PHP-Freaks bekommen vielleicht den einen oder anderen Anfall bei meinem laienhaften Programmierstil. Aber das ist halt meine bisherige, mühsam erarbeitete, wahrscheinlich umständliche Programmierlogik. Vereinfachungen sind natürlich auch willkommen.)

    Herzliche Grüße
    Marcel

  • #2
    Warum versuchst du überhaupt diese Navigation aus dem JS Code zu ziehen?

    Die Kategorien etc werden doch sicherlich auch in der DB gespeichert sein
    (dieses Joomla Modul muss die Daten ja auch irgendwo her holen), da kannst du
    sie dir doch dann ganz einfach direkt von dort holen und das auch gleich so
    sortiert etc wie du es willst, und kannst das ganze dann auch nach belieben mit
    HTML formatiert ausgeben.

    Sicherlich auch performanter als erst die JS Liste generieren zu lassen und diese
    anschließend wieder auseinander zu pflücken

    Kommentar


    • #3
      Besten Dank für die Anregung, WTB! Das probiere ich gleich aus.

      Kommentar


      • #4
        Funktioniert jetzt. Hier mein Code, falls es jemanden interessiert:
        PHP-Code:
        <ul>
          
        <?php

        $unterkategorie 
        = array();

        $db1 JFactory::getDbo();
        $query1 $db1->getQuery(true);
        $query1->select($db1->quoteName(array('cid''name''alias''parent_id''published')));
        $query1->from($db1->quoteName('#__joomgallery_catg'));
        $query1->order($db1->quoteName('name') . ' ASC');
         
        $db1->setQuery($query1);
        $results1 $db1->loadRowList();

        foreach (
        $results1 as $resultRowA) {
          
          if((
        $resultRowA[0] > '2') AND (!in_array($resultRowA[0], $unterkategorie)) AND ($resultRowA[4] == '1')) {
            
        // Root-Kat., Hauptkat., Unterkat. und gesperrte Kat. ausschließen (= nur freigegebene Oberkat.)
            
            
        if($resultRowA[3] <= '2') { // Unterkategorien (parent_id > 2) auf erster Listenebene ausschließen
              
        echo '<li><a href="'.$resultRowA[2].'.html">'.$resultRowA[1].'</a>';
            
              
        // Gibt es Kategorien, deren parent_id = der cid der aktuellen Kategorie ist (die also Unterkategorien der aktuellen Kategorie sind)?
              
        $db2 JFactory::getDbo();
              
        $query2 $db2->getQuery(true);
              
        $query2->select($db2->quoteName(array('cid''name''alias''parent_id''published')));
              
        $query2->from($db2->quoteName('#__joomgallery_catg'));
              
        $query2->where($db2->quoteName('parent_id') . ' = "'.$resultRowA[0].'"');
              
        $query2->order($db2->quoteName('name') . ' ASC');
               
              
        $db2->setQuery($query2);
              
        $results2 $db2->loadRowList();
              
              if(
        count($results2) > 0) {echo '<ul>';} // Falls Unterkategorien vorhanden, Unterliste anlegen
              
              
        foreach ($results2 as $resultRowB) {
                if (
        $resultRowB[3] != '2') { // Hauptkategorie ausschließen
                  
        echo '<li><a href="'.$resultRowA[2].'/'.$resultRowB[2].'.html">'.$resultRowB[1].'</a></li>';
                  
        $unterkategorie[] = $resultRowB[0]; // Unterkategorie als 'verbraucht' merken
                
        }
              }
              
              if(
        count($results2) > 0) {echo '</ul>';}
            
              echo 
        '</li>';
            }
          }
        }

        ?>
        </ul>

        Kommentar

        Lädt...
        X