Symfony - 渲染表单（带原型）

我有一个原型symfony表单的图形化问题。我的“CompetenceGroupe”实体可以有许多“CompetenceItem”实体对象。一切工作正常，但渲染并不完美。Symfony - 渲染表单（带原型）

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

我尝试对齐这三个元素，但删除按钮总是在其他两个元素下。

我希望在视图中呈现什么：

而我现在有：

在从谷歌Chrome浏览Developper工具，我可以看到，删除按钮（带有类“btn-danger”）与我的原型的其他两个元素（类为“competence_groupe_competence_items_0”）不在同一个div中：

我给你我的原型视图的代码（competence_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代码生成的“删除”按钮在每个原型窗体上：

{% 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>

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

来源

2017-08-31 Thomas

你能不能把它追加到.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; 
     }); 
    }

来源

2017-08-31 11:04:39

Symfony - 渲染表单（带原型）

回答

相关问题