为 jQuery 传递一个树枝数组

Question

我的树枝上有一个块从控制器

接收到的变量写入table

{% block foot_informations %}
    {% if ads is not empty %}
        <div class="panel-foot-information row">
            <table id="ads">
                <thead>
                <tr>
                    <th>Departure</th>
                    <th>Destination</th>
                </tr>
                </thead>
                <tbody>
                {% for ad in ads %}
                    <tr class="ad-tr">
                        <td>{{ ad.departure }}</td>
                        <td>{{ ad.packageType }}</td>
                        <td>{{ ad.transportation }}</td>
                        {# <td>{{ ad.date }}</td> #}
                        <td><a href="{{ path('ad_select', { 'id': ad.id }) }}" class="tr-link">select</a></td>
                        <td class="hidden"><input type="hidden" id="idLat" value="{{ ad.departureLatitude }}"/></td>
                        <td class="hidden"><input type="hidden" id="idLong" value="{{ ad.departureLongitude }}"/></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}

我想在 JQuery 中获取这个变量月份来操作它，然后重写我的 table

抓住它看到了这样的东西：var ads = {{ ads|json_encode() }};

我的想法是通过单击按钮来更改数组的值并重建table有人帮助我吗？

        $('#my_button').click(function () {
            alert(ads);
            $.each(ads, function(){
                alert($(this));
                //filter by type package
            });

            //rewrite table
        });

Answer 1

首先我建议你不要混合使用两种策略。

正在服务器端生成视图，这显然是您使用 twig 模板所做的。
正在传递原始数据（使用 AJAX 或像您的示例那样将 json_encoded 数组解析为 JS Object），然后生成 table 与 JS DOM 操作。

但这就是我对这部分的看法。

如果您选择选项 1，您可以在 $.each filter-like 回调中 add/remove 类要隐藏/显示的 table 行. 然后在你的样式表中写这样的东西

tr.filtered {
  display: none;
}

备选方案：像这样扩展您的 table body：

<tbody>
  {% for ad in ads %}
    <tr data-ad-id="{{ ad.id }}" class="ad-tr">
      <td>{{ ad.departure }}</td>
      {# all the other td's #}
    </tr>
  {% endfor %}
</tbody>

而你的 Clickhandler：

$('#my_button').click(function() {
  //alert(ads);
  $.each(ads, function(index, ad) {

    if (ad.packageType == 'some_package_type') {
      $('table#ads tr[data-ad-id=' + ad.id + ']').hide();
    }
  });
  // rewrite table
  // Perhaps there is no need for anymore
});

编辑：

如果你的基本模板中有一个 javascripts 块，你可以这样做来将广告数组暴露给全局 JS 范围（就像你在问题中所说的那样，关于你所看到的）：

{% block javascripts %}
  {{ parent() }}
  <script>
    var ads = {{ ads|json_encode() }};
  </script>
{% endblock %}

为 jQuery 传递一个树枝数组

Pass an array of a twig for a jQuery

javascript

php

jquery

twig