使用jQuery-Repeater显示PHP SQL结果

Question

我的SQL结果看起来像

array:2 [▼
  0 => array:1 [▼
    1 => array:3 [▼
      0 => array:4 [▼
        "code" => "A"
        "type" => "Main"
        "productcode" => "VW"
        "id" => 203
      ]
      1 => array:4 [▼
        "code" => "B1"
        "type" => "Sub"
        "productcode" => "VW"
        "id" => 203
      ]
      2 => array:4 [▼
        "code" => "B2"
        "type" => "Sub"
        "productcode" => "VW"
        "id" => 203
      ]
    ]
  ]
  1 => array:1 [▼
    1 => array:2 [▼
      0 => array:4 [▼
        "code" => "C"
        "type" => "Main"
        "productcode" => "CM"
        "id" => 204
      ]
      1 => array:4 [▼
        "code" => "D1"
        "type" => "Sub"
        "productcode" => "CM"
        "id" => 204
      ]
    ]
  ]
]

我已经编写了类似的树枝代码的

<form class="outer-repeater" action="" method="post" enctype="multipart/form-data">
  <div class="row mb-4 pt-5 justify-content-end">
    <div class="col-lg-10">
      <div data-repeater-list="outer-list">
        <div data-repeater-item>
          {% for value in get_code %}
          {% for numberin in value %}
          {% for info in numberin %}                             
             <div data-repeater-list="outer-list">
              {% if info.type == Main' %}
                <div data-repeater-item>
                    <br/> 
                    MAIN-CODE 
                      <input type="text" name="text-input" value="{{info.qrcode}}"/>
                      <input data-repeater-delete type="button" value="Delete"/>
                </div>
              </div>   
              {% else if info.type == Sub' %}
                <!-- innner SUB repeater -->
                  <div class="inner-repeater">
                    <div data-repeater-list="inner-list">
                      <div data-repeater-item style="background: #f1f1f1">
                        SUB <input type="text" name="inner-text-input" value="{{info.qrcode}}"/>
                        <input data-repeater-delete type="button" value="Delete"/>
                      </div>
                    </div>
                    <input data-repeater-create type="button" value="Add SUB Repeater"/>
                  </div>
                <!-- end inner SUB repeater -->
            {% endfor %}
            {% endfor %}
            {% endfor %}
          <input data-repeater-create type="button" value="Add MAIN REPEATER"/>
        </div>
      </div>
    </div>
  </div>   
</form>

预期输出，我希望看起来像这样的

|A| |Delete button|
  |B1| |Delete button|
  |B2| |Delete button|
  |Add Sub Repeater button|
|C| |Delete button|
  |D1| |Delete button|
  |Add Sub Repeater button|

|ADD MAIN REPEATER|

几个示例：

1. 如果删除了A 2）如果按下B1删除按钮，则只会删除该元素。
2. 如果按下子中继器按钮，则可以看到输入。
3. 第一个203 ID印在树枝上，主和sub，然后是204

。 如果您还有其他方法可以做到这一点，除了jQuery Repeater，这很好

Answer 1

以下是从php到树枝的答案（视图）

 <form class="outer-repeater">
                                     <div data-repeater-list="group-a">
                                        {% for value in get_code %}
                                                                  
                                        {% for numberin in value %}
                                              {% for keys, info in numberin %}
                                          {% set last_item = numberin|length - 1 %}
                                                {% if info.qtype == 'Main' %}
                                                <div data-repeater-item class="row">
                                                    <div  class="mb-3 col-lg-2">
                                                        <label for="name">Main QR</label>
                                                        <input type="text" id="name" name="untyped-input" class="form-control" value="{{info.code}}"/>
                                                    </div>
                          
                                                {% endif %}
                                                  {% if info.qtype == 'Sub'%}
                                                    <div class="inner-repeater mb-4">
                                                        <div data-repeater-list="inner-group" class="inner mb-3">
                                                        {%  if loop.index == 2 %}
                                                            <label>Sub Qrcode no :</label>
                                                          {% endif %}
                                                            <div data-repeater-item class="inner mb-3 row">
                                                                <div class="col-md-10 col-8">
                                                                    <input type="text" name="sub-code" class="inner form-control" value="{{info.code}}"/>
                                                                </div>
                                                                
                                                                <div class="col-md-2 col-4">
                                                                    <div class="d-grid">
                                                                        <input data-repeater-delete type="button" class="btn btn-primary inner" value="Delete"/>
                                                                    </div>
                                                                </div>
                                                                
                                                            </div>
                                                        </div>
                                                        {% if keys == last_item %}
                                                        <input data-repeater-create type="button" class="btn btn-success inner" value="Add Sub"/>
                                                        {% endif %}
                                                    </div>
                                                  {% endif %}
                                                    {% endfor %} 
                                                         {% endfor %} 
                                                           <div class="col-lg-2 align-self-center">
                                                        <div class="d-grid">
                                                            <input data-repeater-delete type="button" class="btn btn-primary" value="Delete"/>
                                                        </div>
                                                    </div>
                                                  
                                               </div>  
                                       {% endfor %}
                                               
                                            </div>
                                            <input data-repeater-create type="button" value="Add Repeater"/>