Question

我在Symfony2中创建了一个嵌入式表单，其中包含许多＆＃34; Employees＆＃34;在一个＆＃34;部门＆＃34;。现在，许多员工加入他们的＆＃34;名字＆＃34;和＆＃34;姓氏＆＃34;在＆＃34;部门工作正常＃34; form（我为此目的使用了jQuery）。我想要＆＃34;删除＆＃34;表单上的按钮功能，我无法弄清楚。任何人都可以帮我删除按钮功能吗？

DepartmentType.php

<?php

namespace InstituteEvents\FormBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class DepartmentType extends AbstractType
{
/**
 * @param FormBuilderInterface $builder
 * @param array $options
 */
 public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('name')
        ->add('employees','collection', array(
            'type' => new EmployeeType(),
            'prototype' => true,
            'allow_add' => true,
            'by_reference' =>false
         ))    
    ;
}

/**
 * @param OptionsResolverInterface $resolver
 */
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'InstituteEvents\FormBundle\Entity\Department'
    ));
}

/**
 * @return string
 */
public function getName()
{
    return 'department';
}
}

EmployeeType.php

<?php

namespace InstituteEvents\FormBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class EmployeeType extends AbstractType
{
/**
 * @param FormBuilderInterface $builder
 * @param array $options
 */
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('firstname')
        ->add('lastname')
    ;
}

/**
 * @param OptionsResolverInterface $resolver
 */
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'InstituteEvents\FormBundle\Entity\Employee'
    ));
}

/**
 * @return string
 */
public function getName()
{
    return 'employee';
}
}

index.html.twig - 此文件包含＆＃34;添加员工＆＃34; jQuery中的按钮功能。在这里，我希望＆＃34;删除员工＆＃34;按钮+功能。我不能正确地了解javascript或jQuery，所以我需要帮助添加＆＃34;删除员工＆＃34;按钮+代码。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
    var index = 0;
    var prototype = $('ul.form-employees').data('prototype');
    $('#form-employee-btn').on('click', function() { 
        var newForm = prototype.replace(/__name__/g, index++);
        var newLi = $('<li></li>');

        newLi.append(newForm);
        $(this).before(newLi);
    });
});
</script>    
<form method = "post">
{{ form_label(form.name, 'Department Name') }}
{{ form_widget(form.name) }}

<ul class="form-employees" data-prototype = "{{ form_widget(form.employees.vars.prototype)|e }}">
   <input id="form-employee-btn" type="button" value="Add Employees"/>
</ul>

   {{ form_widget(form._token) }}

<input type="submit" value="Submit"/>

</form>

Answer 1

按照in the docs：

的说明进行操作

在DepartmentType表单类中，将EmployeeType集合的allow_delete属性设置为true：

    $builder
        ->add('name')
        ->add('employees','collection', array(
            'type' => new EmployeeType(),
            'prototype' => true,
            'allow_add' => true,
            'allow_delete' => true,//add this
            'by_reference' =>false
         )
    );

接下来，添加删除按钮（通过EmployeeType表单中的构建器（->add('delete', 'button')），或手动（使用tempalte中的JS）。然后将事件监听器附加到表单。你已经添加了删除按钮，如下所示：

//EmployeeType:
$builder->add('delete', 'button', ['attr' => ['class' => 'delete-employee']]);

如果你在视图中使用JS添加按钮，那么这段代码应该可以解决问题：

$('#department-form-selector').children('employee-form-selector').each(function(i)
{
    $(this).append('<button name="delete' + i + '" class="delete-employee">Delete</button>');
});

当添加按钮（或即将添加）时，使用jQ附加一个监听器。在这个阶段，按钮不需要在DOM中，因为我们使用的是事件委托，而不是直接绑定：

$('#department-form-selector').on('click', '.delete-employee', function()
{
    $(this).closest('form').delete();//remove element
    //optionally submit department form via AJAX call to persist the delete
    return false;//stop event
});

现在，要处理表单（假设实体设置正确）：

//in the controller that handles the form:
if ($form->isValid())
{
    //1 => we need to query for the data in the DB, so we know what to delete
    $current = $service->getCurrentDepartmentWithEmployees();
    //get the current employees, that need to be updated
    $oldEmployees = new ArrayCollection();
    foreach ($current->getEmployees() as $employee)
        $oldEmployees->add($employee);
    //2 => get the form data
    $department = $form->getData();
    //3 => check if one or more eployees were deleted
    foreach ($oldEmployees as $employee)
    {
        if (!$department->getEmployees()->contains($employee))
        {//employee was removed, update entity/entities
            $current->getEmployees()->removeElement($employee);
            //depending on the relations you've specified:
            $employee->setDepartment(null);
            $em->persist($employee);
            $em->persist($current);
        }
    }
    $em->flush();
}

请注意，此代码未经测试。这是最坏情况下删除的基本流程（双向，一对多关系反转，但没有设置删除级联限制）。
使用此代码作为参考，您应该能够解决这个问题，但

Symfony2 Embedded表单删除按钮功能

1 个答案: