我的模板类型集合树枝

时间:2015-08-14 14:00:00

标签: javascript jquery symfony

我有一个实体映射到其他实体entreprise,js和jquery我有机会最终用data-prototype name 验证一种类型的两个表单 但我不能为我的实体提供一个人体工程师的形式,我该如何解决这个问题



<div class="c col-md-4 col-xs-4">
        <div class="form-group">
            {{ form_rest(form,{ 'attr': {'class': 'form-control'} })}}
        </div>

        </div>
                </form>
        </div>
</div>





<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ asset('bundles/GestionCompte/js/bootstrap.min.css') }}"></script>

<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#gestion_comptebundle_profil_entreprises');

        // On ajoute un lien pour ajouter une nouvelle catégorie
        var $lienAjout = $('<a href="#" id="ajout_Entreprise" class="btn btn-success form-control">Ajouter un agent entreprise</a>');
        $container.append($lienAjout);

        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
        $lienAjout.click(function(e) {
            ajouterEntreprise($container);
            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });

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

        // On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
        if (index == 0) {
            ajouterEntreprise($container);
        } else {
            // Pour chaque entreprise déjà existante, on ajoute un lien de suppression
            $container.children('div').each(function() {
                ajouterLienSuppression($(this));
            });
        }

        // La fonction qui ajoute un formulaire entreprise
        function ajouterEntreprise($container) {
            // Dans le contenu de l'attribut « data-prototype », on remplace :

            // - le texte "__name__" qu'il contient par le numéro du champ
            var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));

            // On ajoute au prototype un lien pour pouvoir supprimer la catégorie
            ajouterLienSuppression($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 ajouterLienSuppression($prototype) {
            // Création du lien
            $lienSuppression = $('<a href="#" class="btn btn-danger form-control">Supprimer</a>');

            // Ajout du lien
            $prototype.append($lienSuppression);

            // Ajout du listener sur le clic du lien
            $lienSuppression.click(function(e) {
                $prototype.remove();
                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });
        }
    });
</script>
<!-- imbriquation du formulaire logistique-->
<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#gestion_comptebundle_profil_logistiques');

        // On ajoute un lien pour ajouter une nouvelle catégorie
        var $lienAjout = $('<a href="#" id="ajout_Entreprise" class="btn btn-success form-control">Ajouter un agent logistique</a>');
        $container.append($lienAjout);

        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
        $lienAjout.click(function(e) {
            ajouterLogistique($container);
            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });

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

        // On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
        if (index == 0) {
            ajouterLogistique($container);
        } else {
            // Pour chaque entreprise déjà existante, on ajoute un lien de suppression
            $container.children('div').each(function() {
                ajouterLienSuppression($(this));
            });
        }

        // La fonction qui ajoute un formulaire Logistique
        function ajouterLogistique($container) {
            // Dans le contenu de l'attribut « data-prototype », on remplace :

            // - le texte "__name__" qu'il contient par le numéro du champ
            var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));

            // On ajoute au prototype un lien pour pouvoir supprimer la logistique
            ajouterLienSuppression($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 logistique
        function ajouterLienSuppression($prototype) {
            // Création du lien
            $lienSuppression = $('<a href="#" class="btn btn-danger form-control">Supprimer</a>');

            // Ajout du lien
            $prototype.append($lienSuppression);

            // Ajout du listener sur le clic du lien
            $lienSuppression.click(function(e) {
                $prototype.remove();
                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });
        }
    });
</script>



</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案