Question

我正在尝试根据表格自动创建一个单独的面板。我有一个工作列表，我希望面板标题是我的jobName字段，我希望面板内容是我的jobDescription字段。我需要显示大约30个作业，而不是编码每个面板，我想使用javascript自动创建每个面板。工作变化，我们的员工知道如何更新工作，但我试图在bootstrap手风琴面板中显示它们。

我对java脚本很新，我尝试过的一切都没用。

以下是我想要自动完成的事情

jobsPanels

Answer 1

我将假设您的数据存储在远程位置以允许第三方编辑，并且如果您的页面上有引导程序，那么您正在使用jQuery。

首先，您需要一些方法将远程数据传输到客户端。 jQuery有一些方便的方法可以做到这一点。如果您的数据可以通过JSON格式访问，则可以查看$.getJSON，否则您将不得不使用$.ajax。

然后，您所要做的就是将数据放在页面上，方法是执行一些HTML building fun并将结果附加到容器中。如果你得到正确的标记，bootstrap手风琴功能应该开箱即用。

这是我在没有看到某些代码或了解您的实现的情况下可以获得的具体内容，但这将是实现您想要的一般方法。

Answer 2

您需要一个包含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>`

基于表值Javascript创建可折叠面板

2 个答案: