我正在使用Symfony2版本2.3。我创建了两个出口Outlet和Voucher。凭证实体代表ebmded形式。我已经将凭证嵌入插座形式，它工作正常。现在，我正在尝试自定义我的凭证嵌入表单模板。我想应用与插座字段相同的样式。我怎么能这样做？ 我的formType：
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('name')
->add('category')
->add('description')
->add('file')
->add('alt')
->add('area')
->add('location')
->add('phone')
->add('latitude')
->add('longitude')
->add('vouchers', 'collection', array(
'type' => new VoucherType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
'prototype' => true,
))
->add('enabled')
;
}
Twig文件：
{{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'form-horizontal', 'id': 'frm-create'} }) }}
<div class="form-group">
{{ form_label(form.name, 'Outlet Name', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.name) }}
<div class="col-lg-10">
{{ form_widget(form.name, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Enter your outlet name.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.category, 'Outlet Category', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.category) }}
<div class="col-lg-10">
{{ form_widget(form.category, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Choose your Outlet Category.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.description, 'Outlet Description', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.description) }}
<div class="col-lg-10">
{{ form_widget(form.description, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Enter your outlet description.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.file, 'Image', { 'label_attr': {'class': 'control-label col-lg-2 col-sm-2'} }) }}
{{ form_errors(form.file) }}
<div class="col-md-4">
{{ form_widget(form.file, {'attr': {'class' : 'default'} }) }}
<p class="help-block">Upload your Outlet image.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.alt, 'Image description', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.alt) }}
<div class="col-lg-10">
{{ form_widget(form.alt, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Enter the image description.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.area, 'Outlet Area', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.area) }}
<div class="col-lg-10">
{{ form_widget(form.area, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Choose your outlet area.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.location, 'Outlet Location', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.location) }}
<div class="col-lg-10">
{{ form_widget(form.location, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Enter your outlet location.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.phone, 'Outlet Phone', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.phone) }}
<div class="col-lg-10">
{{ form_widget(form.phone, {'attr': {'class' : 'form-control', 'data-mask':'(999) 999-9999'} }) }}
<p class="help-block">Enter your outlet phone.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.latitude, 'Latitude', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.latitude) }}
<div class="col-lg-10">
{{ form_widget(form.latitude, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Enter your outlet latitude.</p>
</div>
</div>
<div class="form-group">
{{ form_label(form.longitude, 'Outlet Longitude', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }}
{{ form_errors(form.longitude) }}
<div class="col-lg-10">
{{ form_widget(form.longitude, {'attr': {'class' : 'form-control'} }) }}
<p class="help-block">Enter your outlet longitude.</p>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
{{ form_errors(form.enabled) }}
<label>
{{ form_widget(form.enabled) }} {{ form_label(form.enabled, 'Status') }}
</label>
</div>
</div>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
Javascript代码：
<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#mybook_adminbundle_outlet_vouchers');
// add a link in order to add a new voucher
var $lienAjout = $('<a href="#" id="add_voucher" class="btn">Add a new voucher</a>');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function (e) {
ajouterCategorie($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) {
ajouterCategorie($container);
} else {
// Pour chaque catégorie déjà existante, on ajoute un lien de suppression
$container.children('div').each(function () {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire Categorie
function ajouterCategorie($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 $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Voucher 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++;
}
// a function that add the delete voucher link
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('<a href="#" class="btn btn-danger">Delete</a>');
// add the link
$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>
答案 0 :(得分：0)
您需要创建一个VoucherType类并添加修改字段。在这种情况下，我的garantiaType是你的voucherType类。
<?php
namespace daci\contratosBundle\Form\Type;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
class garantiaType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('fecha_emision','date', array(
'required' => true,
'widget' => 'single_text',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('fecha_vencimiento','date', array(
'required' => true,
'widget' => 'single_text',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('fecha_entrega_estimada','date', array(
'required' => true,
'widget' => 'single_text',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('fecha_recibido_daci','date', array(
'label' => 'Fecha de recibido DACI',
'required' => true,
'widget' => 'single_text',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('fecha_entrega','date', array(
'label' => 'Fecha de devolución al proveedor',
'required' => true,
'widget' => 'single_text',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('empresa_emite_garantia', 'text', array(
'required' => false,
'label' => 'Empresa que emite la garantía',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('tiempo_de_garantia', 'text', array(
'label' => 'Plazo de vigencia',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
)
)
->add('estado', 'choice', array(
'empty_value' => 'Elija una opción... ',
'choices' => array('0' => 'No Vigente', '1' => 'Vigente'),
'required' => true,
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
))
->add('isRecibido', 'checkbox', array(
'required' => false,
'label' => 'Recibido',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 25px;',
),
)
)
->add('porcentaje','integer', array(
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
'attr' => array('help'=>'text help'),
))
->add('monto','integer', array(
'label' => 'Monto de la garantía',
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 35px;',
),
))
->add('comentarios', 'textarea', array(
'required' => false,
'label_attr' => array(
'style' => 'vertical-align: top; padding-bottom: 0px;',
),
'attr' => array(
'style' => 'width: 485px;',
)
)
)
->add('archivo', new DocumentType(), array(
'required' => false,
'label' => ' ',
)
);
}
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'daci\contratosBundle\Entity\garantia',
));
}
public function getName()
{
return 'garantia';
}
}
希望它有所帮助!!
这是我的javascript代码。在我的例子中，我有三个embebed类（比如你的voucherType但其中有三个）所以我不得不为它们中的每一个修改它。这是我的代码，我建议使用代码sorrounding divs和你需要的东西。就我而言，我使用＆lt; h r＆gt;标记为separete他们。
javascript代码：
// Get the ul that holds the collection of tags
var collectionHolderGar = $('ul.garantias');
var collectionHolderSeg = $('ul.seguimientos');
var collectionHolderVis = $('ul.visitas');
// setup an "add a tag" link
var $addGarantiaLink = $('<a href="#" class="add_garantia_link">Agregar Garantia</a>');
var $addSeguimientoLink = $('<a href="#" class="add_seguimiento_link">Agregar Seguimiento</a>');
var $addVisitaLink = $('<a href="#" class="add_visita_link">Agregar Visita</a>');
var $newLinkLiGar = $('<li></li>').append($addGarantiaLink);
var $newLinkLiSeg = $('<li></li>').append($addSeguimientoLink);
var $newLinkLiVis = $('<li></li>').append($addVisitaLink);
$(document).ready(function(){
// add a delete link to all of the existing tag form li elements
collectionHolderGar.find('li').each(function() {
addGarantiaFormDeleteLink($(this));
});
collectionHolderSeg.find('li').each(function() {
addSeguimientoFormDeleteLink($(this));
});
collectionHolderVis.find('li').each(function() {
addVisitaFormDeleteLink($(this));
});
// add the "add a tag" anchor and li to the tags ul
collectionHolderGar.append($newLinkLiGar);
collectionHolderSeg.append($newLinkLiSeg);
collectionHolderVis.append($newLinkLiVis);
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
collectionHolderGar.data('index', collectionHolderGar.find(':input').length);
collectionHolderSeg.data('index', collectionHolderSeg.find(':input').length);
collectionHolderVis.data('index', collectionHolderVis.find(':input').length);
$addGarantiaLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
addGarantiaForm(collectionHolderGar, $newLinkLiGar);
});
$addSeguimientoLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
addSeguimientoForm(collectionHolderSeg, $newLinkLiSeg);
});
$addVisitaLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
addVisitaForm(collectionHolderVis, $newLinkLiVis);
});
});
function addGarantiaForm(collectionHolderGar, $newLinkLiGar) {
// Get the data-prototype explained earlier
var prototype = collectionHolderGar.data('prototype');
// get the new index
var index = collectionHolderGar.data('index');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
collectionHolderGar.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLiGar.before($newFormLi);
// add a delete link to the new form
addGarantiaFormDeleteLink($newFormLi);
}
function addSeguimientoForm(collectionHolderSeg, $newLinkLiSeg) {
// Get the data-prototype explained earlier
var prototype = collectionHolderSeg.data('prototype');
// get the new index
var index = collectionHolderSeg.data('index');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
collectionHolderSeg.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLiSeg.before($newFormLi);
// add a delete link to the new form
addSeguimientoFormDeleteLink($newFormLi);
}
function addVisitaForm(collectionHolderVis, $newLinkLiVis) {
// Get the data-prototype explained earlier
var prototype = collectionHolderVis.data('prototype');
// get the new index
var index = collectionHolderVis.data('index');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
collectionHolderVis.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLiVis.before($newFormLi);
// add a delete link to the new form
addVisitaFormDeleteLink($newFormLi);
}
function addGarantiaFormDeleteLink($tagFormLi) {
var $removeFormA = $('<br/><a href="#">Borrar</a><hr/>');
$tagFormLi.append($removeFormA);
$removeFormA.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// remove the li for the tag form
$tagFormLi.remove();
});
}
function addSeguimientoFormDeleteLink($tagFormLi) {
var $removeFormA = $('<br/><a href="#">Borrar</a><hr/>');
$tagFormLi.append($removeFormA);
$removeFormA.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// remove the li for the tag form
$tagFormLi.remove();
});
}
function addVisitaFormDeleteLink($tagFormLi) {
var $removeFormA = $('<br/><a href="#">Borrar</a><hr/>');
$tagFormLi.append($removeFormA);
$removeFormA.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// remove the li for the tag form
$tagFormLi.remove();
});
}