Question

我使用bootstrap手风琴制作了这个手风琴表。它运作良好，但看起来很糟糕。我设置它的方式是嵌套手风琴。代码可以看作如下：

<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- {# Load CSS and JavaScript #} -->

<!-- {# Load the tag library #} -->
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

{% block javascript %}

<script>
//this is not working as yet
$(document).ready(function() {
//script to refresh div  - formclass  is class name of form
$('#formclass2').submit(function(event){
var servername = $('#servername').val();
var divname=servername+"div";
  $.ajax({
    url: 'formsubmitcode',
    type: 'post',
    dataType:'html',   //expect return data as html from server
   data: $('#formclass').serialize(),
   success: function(response, textStatus, jqXHR){
      $('#'+divname).html(response);   //select the id and put the response in the html
    },
   error: function(jqXHR, textStatus, errorThrown){
      console.log('error(s):'+textStatus, errorThrown);
   }
 });
});
 });
</script>
<script type="text/javascript">
$(document).ready(function () {
    var frm = $('#myform');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),  //picks up the action from form
            data: frm.serialize(),
            success: function (data) {
                $("#test").html(data);
                $("MESSAGE-DIV").html("Something not working");
            },
            error: function(data) {
                $("#MESSAGE-DIV").html("Something went wrong!");
            }
        });
        ev.preventDefault();
    });
});

</script>

{% endblock %}

</head>

<body>

<ul>



{% for checkkey,checkvalue in orgnizedDicts.items %}


<div class="accordion text-left" id="accordion1">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1{{checkkey}}" href="#collapseOne{{checkkey}}">
      {{checkkey}}
      </a>
    </div>

    <div id="collapseOne{{checkkey}}" class="accordion-body collapse">
      <div class="accordion-inner">

        <!-- Here we insert another nested accordion -->

        {% for servkey,servvalue in checkvalue.items %}      

        <div class="accordion" id="accordion2{{servkey}}">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2{{servkey}}" href="#collapseInnerOne{{servkey}}">
                {{servkey}} 
              </a>

            </div>


            <div id="collapseInnerOne{{servkey}}" class="accordion-body collapse">
              <div class="accordion-inner">

                  <!-- table row header -->
                  <table class="table table-bordered table-striped">
                  <tr>
                  <th>Servicename</th>
                  <th>Curent status</th>
                  <th>Action</th>
                  </tr>
                   {% for servicekey,servicevalue in servvalue.items %} 
                     <tr>

                     <td><input type="hidden" name="servername" value="{{servkey}}">
                     <input type="text" name="servicename" value="{{servicekey}}"></td>
                     <td>{{servicevalue}}</td><!--status-->
                     <td><input type="submit" value="Start" name="Start">
                     <input type="submit" value="Stop" name="Stop">
                     <input type="submit" value="Restart" name="Restart"</td>
                     <!-- </form> -->
                     <!-- </div> -->
                     <div id="MESSAGE-DIV"></div>
                     </tr>
                   {% endfor %}
                   </table>
               </div>

            </div>


          </div>
          </div>          

        <!-- Inner accordion ends here -->
         {% endfor %}


      </div>

    </div>

  </div>

</div>
{% endfor %}

</body>
</html>

它是django项目的一部分，因此我使用他们的模板语言来引入数据以填充表格并动态生成它。我调用的数据是嵌套在另一个字典中的嵌套字典。我的桌子实际上是在第二个嵌套的手风琴中开始的。在手风琴的嵌套可折叠部分，我想做一些格式化，但是我喜欢用html和css做新手，我只想给外面的手风琴一个边框并用白色文字做黑色，并给内部手风琴一个边界和变化使绿色。我也应该将按钮更改为自举按钮，但我认为这很简单。

设计手风琴表

0 个答案: