基於表值創建可摺疊面板Javascript

我想根據表自動創建一個單獨的面板。我有一份工作清單，我希望面板標題成爲我的jobName字段，並且我希望面板內容成爲我的jobDescription字段。我們需要展示大約30個作業，而不是編碼每個面板，我想使用javascript自動創建每個面板。工作改變了，我們的工作人員知道如何更新工作，但我試圖在自舉手風琴小組中展示他們。基於表值創建可摺疊面板Javascript

我對java腳本很陌生，我試過的所有東西都沒有工作。

下面就是我試圖完成自動

jobsPanels

來源

2017-02-16 Jenergy

如果要動態創建它，則需要數據庫，否則。除了我提到的方法之外，這也是可能的。你將需要爲這30個工作進行循環，並創建一個面板，然後在其中顯示記錄。 – FreedomPride

我會假設你的數據存儲在一個偏僻的地方，允許第三方編輯，你是如果你在頁面上引導，使用jQuery。

首先，您需要某種方式將遠程數據傳輸到客戶端。 jQuery有一些方便的方法來做到這一點。如果你的數據是以JSON格式訪問的，你可以看看$.getJSON，否則你將不得不使用$.ajax。

然後，您所要做的就是將數據放在頁面上，做一些HTML building fun並將結果附加到容器中。如果您獲得正確的標記，自舉手風琴功能應該可以直接使用。

這是特定的，因爲我可以不看到一些代碼或知道你的實現，但這將是實現你想要的一般方式。

來源

2017-02-16 02:47:16 ppajer

您將需要包含jobNames和jobDescriptions的某種類型的列表。這可以存儲在JSON或數組中。然後通過循環訪問數據，可以通過首先構建每個面板的html字符串並附加jobNames和jobDescriptions，將每個面板動態追加到accordion容器。我在jsfiddle上做了一個例子 - 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>`

來源

2017-02-16 02:53:06 KSankar

好吧，所以我得到了與我的項目合作（非常感謝你，我是德夫不是這個方向）。理論上，我應該能夠從我的數據庫「jobName」中將[Job1，Job2等]等字段名稱和標題從Job1，Job2等改爲IT專家，ACS Director等。等等 – Jenergy

基於表值創建可摺疊面板Javascript

回答

相關問題