Erstellen Sie zusammenklappbare Panel basierend auf einer Tabelle Werte Javascript

Question

Ich versuche, ein separates Panel basierend auf einer Tabelle automatisch zu erstellen. Ich habe eine Jobliste, ich möchte, dass der Panel-Header mein jobName-Feld ist, und ich möchte, dass der Panel-Inhalt mein jobDescription-Feld ist. Wir haben ungefähr 30 Jobs, die ich anzeigen muss, und anstatt jedes Panel zu codieren, möchte ich Javascript verwenden, um jedes Panel automatisch zu erstellen. Die Jobs ändern sich und unsere Mitarbeiter wissen, wie man die Jobs aktualisiert, aber ich versuche, sie in einem Bootstrap-Akkordeon-Panel anzuzeigen.

Ich bin neu in Java-Skript und alles, was ich versucht habe, hat nicht funktioniert.

Unten ist das, was ich versuche, automatisch an einem entfernten Ort zu ermöglichen Bearbeitung von Dritten gespeichert sind,

jobsPanels

Answer 1

zu erreichen Ich werde Ihre Daten zu übernehmen und dass Sie Verwenden von jQuery, wenn Sie eine Bootstrap auf Ihrer Seite haben.

Zuerst benötigen Sie eine Möglichkeit, die Remote-Daten an den Client zu erhalten. jQuery hat einige bequeme Methoden, dies zu tun. Wenn Ihre Daten im JSON-Format zugänglich sind, können Sie einen Blick auf $.getJSON werfen, sonst müssen Sie mit $.ajax herumspielen.

Dann alles, was Sie tun müssen, ist die Daten auf der Seite, indem Sie einige HTML building fun und fügen Sie die Ergebnisse an Ihren Container. Wenn Sie das Markup-Recht erhalten, sollte die Bootstrap-Akkordeon-Funktionalität funktionieren.

Dies ist so spezifisch, wie ich bekommen könnte, ohne Code zu sehen oder Ihre Implementierung zu kennen, aber dies wäre der allgemeine Weg, um das zu erreichen, was Sie wollen.

Answer 2

Sie benötigen eine Liste mit JobNames und JobDescriptions. Dies kann in JSON oder einem Array gespeichert werden. Durch das Durchschleifen der Daten können Sie jedes Panel dynamisch an den Akkordeon-Container anhängen, indem Sie zunächst die HTML-Zeichenfolge für jedes Panel erstellen und die JobNames und JobDescriptions anhängen. Ich habe ein Beispiel auf jsfiddle gemacht - https://jsfiddle.net/7ayh8ppd/12/ `

 <div class="panel-group" id="accordion"> 

     </div> 


    <script> 

     var jobList = ["Job1", "Job2", "Job3", "Job4", "Job5"]; 
     var html = "" 

     $.each(jobList, function (index, value) { 

      html += "<div class=\"panel panel-default\">"; 
      html += "  <div class=\"panel - heading\">"; 
      html += "   <h4 class=\"panel - title\">"; 
      html += "    <a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse"+index+1+"\">"+value+"</a>"; 
      html += "   </h4>"; 
      html += "  </div>"; 
      html += "  <div id=\"collapse"+index+1+"\" class=\"panel - collapse collapse\">"; 
      html += "   <div class=\"panel - body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit,"; 
      html += "    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,"; 
      html += "    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>"; 
      html += "  </div>"; 
      html += " </div>"; 

     }); 

     $("#accordion").append(html); 

    </script>`