Question

我创建了一个包含数据库数据的HTML表。如果我单击一个表行的标题，则应打开一个包含该行数据的模式。

现在我用这种方式解决了：

<table>
{% for item in items %}
<tr>
    <td>
        <td><a href="#" data-toggle="modal" data-target="modal{{ item.id }}">{{ item.name }}</a></td>
    </td>
</tr>
{% endfor %}
</table>

{% for item in items %}
<div class="modal" id="modal{{ item.id }}">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
      <h5 class="modal-title">ID: {{ item.id }}</h5>
      ... 
      </div>
  </div>
</div>

现在正在工作，没办法。但正如您所看到的，对于数组中的每个项目，将创建一个模态。例如，如果我在阵列中有9000个项目。我将在HTML中拥有9000个模态。我想这不是很好，所以我正在寻找一种方法，只使用1个模态并包含基于ID的内容。

如何使用twig和PHP（不是symfony框架，只有twig引擎）这样做或者最好的方法是什么？

我正在使用Bootstrap 4作为我的Modal / Table。

编辑：

@entio将我与一个类似的问题联系起来，所以我试了一下。首先，我按照entio的答案将我的$tickets（包含所有数据的数组）编码为json：

{% autoescape %}
    var globalDataObject = {{ tickets|json_encode()|raw }};
{% endautoescape %}

Json对象如下所示：

0:
    0: "93"
    1: "3"
    2: "Testticket"
    3: "0"
    4: ""
    5: "2017-12-08 14:43:21"
    6: "0000-00-00 00:00:00"
    7: "2017-12-08 14:43:21"
    8: "test"
    9: "Test"
    description: "test"
    subject: "Testticket"
    closed_at: "0000-00-00 00:00:00"
    closemessage: null
    device: "Test"
    customerid: "3"
    last_answer: "2017-12-08 14:43:21"
    opened_at: "2017-12-08 14:43:21"
    state: "0"
    ticketid: "93"
1:
    0: "94"
[...]

我现在的问题是我不知道如何访问这个json对象。 entio相关问题的答案并没有帮助我。我当前的代码（复制％粘贴，链接答案的一些更改）：

<script type="text/javascript">
    {% autoescape %}
    var globalDataObject = {{ tickets|json_encode()|raw }};
    {% endautoescape %}

    (function($) {
    var myModal = $('#ticketModal');
    $('#subject').on('click', function(){
        $.ajax({
          type: 'GET',
          url: 'home.php?ticketid='+$(this).data('id'),
          dataType: 'json',
          success: function(data){
            htmlData = '<h1>Test:'+data.subject';
            myModal.find('.modal-body').html(htmlData);
            modal.modal('show);
          }
       });
       return false;
   });
})(jQuery);
</script>

我的表格行的HTML代码更改为：

<td><a href="#" id="subject" data-id="{{ ticket.ticketid }}">{{ ticket.subject}}</a></td>

因此表格中所有行的data-id都是数据库ID。我现在如何在Json中搜索正确的Item并打开一个包含json对象数据的Modal？

当前的Javascript代码无效。我猜是因为我永远无法访问globalDataObject。

Answer 1

如果你不想涉及JS，那么你必须生成所有节点。

否则，您可以将包含所有数据的对象传递给JS，并让它在click事件上动态创建模态。解析为json可以使用json_encode过滤器完成：

<script type="text/javascript">
    var globalDataObject = {{ yourDataObject|json_encode() }};
</script>

这有点相关，所以你可以从它的答案中学习： Load JSON data into a Bootstrap modal

如何使用Twig以1模态加载数据

1 个答案: