传递一个twig变量作为javascript函数的参数

时间:2018-01-24 09:06:30

标签: javascript php jquery symfony

我有一个数据表,我需要通过t.row.add()动态添加行,该表由4列组成,其中一列内有按钮,这些按钮是Show&编辑,他们需要{{row.id}}所以可以显示或编辑,问题是我不知道如何使twig变量工作。这是我的表格代码:

<table class="table table-striped table-bordered table-hover" id="sample_2">
    <thead>
        <tr>
            <th class="table-checkbox noprint" style="text-align:center;">
                <input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" disabled/>
            </th>
            <th width="40%" style="text-align:center;">
                Valoraciones
            </th>
            <th width="20%" style="text-align:center;">
                Estado
            </th>
            <th width="20%" style="text-align:center;" class="noprint">
                Acciones
            </th>
        </tr>
    </thead>
    <tbody>
        {% for valoracion in valoracion %}
        <tr class="odd gradeX" id="fila{{ valoracion.id }}">
            <td class="noprint">
                <input type="checkbox" class="checkboxes" disabled/>
            </td>
            <td style="text-align:center;" id="valoracion">
                {{ valoracion.descripcion }}
            </td>
            {% if valoracion.enabled == 1 %}
            <td style="text-align:center;" id="estadoValEnable">Activo</td>
            {% else %}
            <td style="text-align:center;" id="estadoValEnable">Inactivo</td>
            {% endif %}
            <td style="text-align:center;" class="noprint">
                <a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion({{valoracion.id}})">Ver</a>
                <a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails({{valoracion.id}})">Editar</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

以下是创建新行的操作(创建操作位于模态视图中):

function sendDataCreateValoracionDetails() {
    if ($('#CrearValoracionMantenimiento').val() == "") {
        Notificacion("error", "La descripión de la competencia no puede estar vacía");
        $('#CrearValoracionMantenimiento').focus();
    } else {
        $.blockUI({
            baseZ: 20000,
            message: '<h4><img src="{{ asset('
            assets / global / plugins / cubeportfolio / cubeportfolio / img / cbp - loading.gif ') }}" /> Guardando datos, por favor espere...</h4>'
        });
        var form = document.getElementById("formCreateMantenimientoValoracionDetails");
        var formData = new FormData(form);
        $.ajax({
            url: '{{ path('
            createValoracionMantenimiento ') }}',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(returndata) {
                if (returndata.success == true) {
                    $.unblockUI();
                    $('#crearValoracion').modal('hide');
                    Notificacion("success", "Valoración RP", "Los datos se han guardado correctamente.");

                    if ($('#EstadoValoracion').attr('checked')) {
                        var status = "Activo";
                    } else {
                        var status = "Inactivo";
                    }
                    $(document).ready(function() {
                        var t = $('#sample_2').addClass('centro').DataTable();

                        $("#sample_2").each(function() {
                            t.row.add([
                                '<tr>' +
                                '<td><input type="checkbox" class="checkboxes" disabled/></td>',
                                '<td>' + ($("#CrearValoracionMantenimiento").val()) + '</td>',
                                '<td>' + status + '</td>',
                                '<td ><a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion(' {
                                    {
                                        valoracion.id
                                    }
                                }
                                ')">Ver</a><a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails(' {
                                    {
                                        valoracion.id
                                    }
                                }
                                ')">Editar</a></td></tr>',

                            ]).draw(false);

                        });
                    });


                } else {
                    if (returndata.success == false) {
                        $.unblockUI();
                        Notificacion("error", "Valoración RP", "Existe una valoración igual.");
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                Notificacion("error", "Valoración RP", "Ha existido un problema y no se ha podido crear la valoración.");
                $.unblockUI();
            }
        });
    }
}

这些是我的按钮:

<a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion('{{ valoracion.id }}')">Ver</a>

<a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails('{{ valoracion.id }} ')">Editar</a>

这些是我需要在函数内部进行的twig参数:

onclick="showMantenimientoValoracion('{{ valoracion.id }}') /// 
onclick="editMantenimientoValoracionDetails('{{ valoracion.id }} ')`

这是功能代码:

if ($('#EstadoValoracion').attr('checked')) {
    var status = "Activo";
} else {
    var status = "Inactivo";
}
$(document).ready(function() {
    var t = $('#sample_2').addClass('centro').DataTable();

    $("#sample_2").each(function() {
        t.row.add([
            '<tr>' +
            '<td><input type="checkbox" class="checkboxes" disabled/></td>',
            '<td>' + ($("#CrearValoracionMantenimiento").val()) + '</td>',
            '<td>' + status + '</td>',
            '<td ><a class="btn btn-sm default" data-toggle="modal" onclick="showMantenimientoValoracion(' {
                {
                    valoracion.id
                }
            }
            ')">Ver</a><a class="btn btn-sm blue" data-toggle="modal" onclick="editMantenimientoValoracionDetails(' {
                {
                    valoracion.id
                }
            }
            ')">Editar</a></td></tr>',

        ]).draw(false);

    });
});

谢谢大家:)

2 个答案:

答案 0 :(得分:0)

可以通过使用 .twig 扩展文件名来结束twig变量,当我需要在javascript函数中使用变量twig时,我创建里面文件树枝。没有其他办法。

答案 1 :(得分:0)

只需删除树枝变量中的引号 -

onclick="showMantenimientoValoracion('{{ valoracion.id }}')

应该是

onclick="showMantenimientoValoracion({{ valoracion.id }})

在你的javascript函数中添加参数 -

function sendDataCreateValoracionDetails(valoracion_id) {
    console.log(valoracion_id)
    // Your code goes here
}

这应该这样做。