Question

我有一个原型symfony表单的图形问题。我和＃34; CompetenceGroupe＆＃34;实体可以有很多＆＃34; CompetenceItem＆＃34;实体对象。一切都很好，但渲染并不完美。

当我创建一个新的CompetenceGroupe时，在我的表单中，我可以添加和删除CompetenceItems子表单。一个compeItem表单有一个文本输入，一个选择输入和一个＆＃34;删除＆＃34;按钮（红色，由javascript生成）。

我尝试对齐这三个元素，但删除按钮总是位于另外两个元素之下。

我希望在视图中呈现：

我现在拥有的东西：

在我的Google Chrome开发工具中，我可以看到删除按钮（带有类＆＃34; btn-danger＆＃34;）与我的原型中的其他两个元素不在同一个div中（带有类＆＃34; compe_groupe_competence_items_0＆＃34;）：

我给你原型视图的代码（compe_item_prototype.html.twig）

{% block competence_item_widget %}

    <div id="{{ form.vars.id }}" class="row">

        <div class="col-md-7">
            {{ form_label(form.libelle, "Libelle", {'label_attr': {'class': 'sr-only control-label'}}) }}
            {{ form_errors(form.libelle) }}
                {{ form_widget(form.libelle, {'attr': {'class': 'form-control', 'placeholder': 'Libellé'}}) }}
        </div>

        <div class="col-md-3">
            {{ form_label(form.niveau, "Niveau", {'label_attr': {'class': 'sr-only control-label'}}) }}
            {{ form_errors(form.niveau) }}
                {{ form_widget(form.niveau, {'attr': {'class': 'form-control selectModal'}}) }}
        </div>

    </div>

{% endblock %}

我的主视图（使用CompetenceGroupe表单）和Javascript代码生成＆＃34;删除＆＃34;每个原型表格上的按钮：

{% form_theme formAddCompetence 'espaceUtilisateur/forms/prototypes/competence_item_prototype.html.twig' %}

{{ form_start(formAddCompetence, { 'attr': {'class': 'formCompetenceAdd'} }) }}

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">{{ libelleCategorie }}</h4>
    </div>

    <div class="modal-body">

        <h4><span class="label label-default">Les champs marqués d'un astérisque sont obligatoires.</span></h4>

        {{ form_row(formAddCompetence.titre) }}

        {{ form_row(formAddCompetence.competence_items) }}

        {{ form_widget(formAddCompetence._token) }}

        <br>
        <a href="#" id="add_category" class="btn btn-default">Ajouter une catégorie</a>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>

        {% if objectCompetence.idCompetenceGroupe is not empty %}
            {{ form_widget(formAddCompetence.edit) }}
            <input type="hidden" name="idCompetenceGroupe" id="idCompetenceGroupe" value="{{ objectCompetence.idCompetenceGroupe }}">
        {% else %}
            {{ form_widget(formAddCompetence.save) }}
        {% endif %}
    </div>

</form>

<script type="text/javascript">
    $(document).ready(function() {
        // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
        var $container = $('div#competence_groupe_competence_items');

        // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
        var index = $container.find(':input').length;

        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
        $('#add_category').click(function(e) {
            addCategory($container);

            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });

        // On ajoute un premier champ automatiquement s'il n'en existe pas déjà un (cas d'une nouvelle annonce par exemple).
        if (index == 0) {
            addCategory($container);
        } else {
            // S'il existe déjà des catégories, on ajoute un lien de suppression pour chacune d'entre elles
            $container.children('div').each(function() {
                addDeleteLink($(this));
            });
        }

        // La fonction qui ajoute un formulaire CategoryType
        function addCategory($container) {
            // Dans le contenu de l'attribut « data-prototype », on remplace :
            // - le texte "__name__label__" qu'il contient par le label du champ
            // - le texte "__name__" qu'il contient par le numéro du champ
            var template = $container.attr('data-prototype')
                            .replace(/__name__label__/g, 'Catégorie n°' + (index+1))
                            .replace(/__name__/g,        index)
                    ;


            // On crée un objet jquery qui contient ce template
            var $prototype = $(template);

            // On ajoute au prototype un lien pour pouvoir supprimer la catégorie
            addDeleteLink($prototype);

            // On ajoute le prototype modifié à la fin de la balise <div>
            $container.append($prototype);

            // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
            index++;
        }

        // La fonction qui ajoute un lien de suppression d'une catégorie
        function addDeleteLink($prototype) {

            // Création du lien
            //var $deleteLink = $('<div><a href="#" class="btn btn-danger">Supprimero</a></div>'); // OLD
            var $deleteLink = $('<div class="col-md-1"><button class="btn btn-danger"><i class="fa fa-trash-o"></i></button></div>');

            // Ajout du lien
            $prototype.last().append($deleteLink); // OLD

            // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
            $deleteLink.click(function(e) {
                $prototype.remove();

                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });
        }
    });
</script>

感谢任何人花时间帮助我。

Answer 1

你能不能将它追加到.row？

    function addDeleteLink($prototype) {

        // Création du lien
        //var $deleteLink = $('<div><a href="#" class="btn btn-danger">Supprimero</a></div>'); // OLD
        var $deleteLink = $('<div class="col-md-1"><button class="btn btn-danger"><i class="fa fa-trash-o"></i></button></div>');

        // Ajout du lien
        $prototype.find('.row').append($deleteLink); // OLD

        // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
        $deleteLink.click(function(e) {
            $prototype.remove();

            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });
    }

Symfony - 渲染形式（带原型）

1 个答案: