javascript - Twig-Template 中的数据表中的静态子行(附加信息)

Question

我正在将 Symfony2 与 Doctrine、Twig 和 DataTables 一起使用。在数据表中显示了我的实体的概述以及基本信息。单击一行时，我想显示该实体的附加信息，如您所见 here 。

这是代码(其中应用程序是我的学说实体的集合):

 <tbody>
                    {% for application in applications %}
                        <tr id="application-{{ application.id }}" data-child-information="{{ application | json_encode | raw }}">
                            <td>
                                {{ application.name }}
                            </td>
                            <td>
                                {{ application.company.name | default("") }}
                            </td>
                            <td>
                                {{ application.events.count }}
                            </td>
                            <td>
                                {{ application.dateCreate | date('d.m.Y')  }}
                            </td>
                            <td>
                                {% if application.dateSent %}
                                    {{ application.dateSent | date('d.m.Y')  }}
                                {% else %}
                                    {{ application.readableStatus(constant('APPLICATION_STATUS_OPEN', application)) }}
                                {% endif %}
                            </td>
                    {% endfor %}
                    </tbody>

文档说将使用 ajax 调用来获取数据。但由于我已经有了实体的信息，所以我不想使用 AJAX，而是从头开始创建子行。对此的最佳实践是什么？正如你所看到的，我尝试将 json 编码的实体保存在数据标签中，这样我就可以在 javascript 函数中读取它(请参阅 DataTables 文档中的格式函数。

Answer 1

您不必使用文档中的方法，这只是一个建议。您只需将 data-child-information 的内容注入(inject)详细信息行即可:

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
       // This row is already open - close it
       row.child.hide();
       tr.removeClass('shown');
    }
    else {
       // Open this row
       row.child(tr.attr('data-child-information')).show();
       tr.addClass('shown');
    }
});

“在家工作”演示 -> http://jsfiddle.net/mgmL0f8c/