在Symfony2中嵌入多级表单集合
塞尔吉奥·内格里
我有以下情况：CVCFormType是BenefiItemsFormType的集合。每个BenefitItemFormType都有一个字段，该字段是BenefitGroupFormType的集合。
我希望能够动态添加和删除元素。
我按照这里的指示进行。当然，在我们谈论嵌套集合时，必须对它们进行调整。
在“固定”方面，一切正常。到目前为止，在动态方面（添加和删除元素），我仅实现了内侧（添加BenefitGroups），并且仅实现了添加字段。
这是我得到的（不正确）。我在顶部的福利项目上有一个双链接（我应该只有一个），另外两组链接（第一个福利项目和第二个福利项目）不是独立的（我在上面的第二个中单击，然后它将为下面的字段添加一个字段）。我认为我必须动态更改ul类名。
有什么帮助吗？
这是屏幕截图：
这是代码：
{% extends "internal.html.twig" %}
{% block content %}
{{ form_start(form) }}
<br><b>CVC</b>
{% for benefititem in form.benefititems %}
<br><b>Benefit Item</b>
{{ form_row(benefititem.comment) }}
<br><b>Benefit Groups</b>
{# <ul class="benefitgroups"> #}
<ul class="benefitgroups" data-prototype="{{ form_widget(benefititem.benefitgroups.vars.prototype)|e }}">
{% for benefitgroup in benefititem.benefitgroups %}
<li>{{ form_row(benefitgroup.name) }}</li>
{% endfor %}
</ul>
{% endfor %}
{{ form_end(form) }}
{% block javascripts %}
<script>
var $collectionHolder;
// setup an "add a benefitgroup" link
var $addBenefitGroupLink = $('<a href="#" class="add_benefitgroup_link">Add a Group</a>');
var $newLinkLi = $('<li></li>').append($addBenefitGroupLink);
jQuery(document).ready(function() {
// Get the ul that holds the collection of benefit groups
$collectionHolder = $('ul.benefitgroups');
// add the "add a benefitgroup" anchor and li to the benefitgroups ul
$collectionHolder.append($newLinkLi);
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$addBenefitGroupLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
addBenefitGroupForm($collectionHolder, $newLinkLi);
});
});
function addBenefitGroupForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
// get the new index
var index = $collectionHolder.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
$collectionHolder.data('index', index + 1);
// Display the form in the page in an li, before the "Add a BenefitGroup" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLi.before($newFormLi);
}
</script>
{% endblock %}
{% endblock content %}
如果可以帮助您，请生成的HTML：
<html>
<head>
<meta charset="UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Welcome!</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<h1>Here you are inside</h1>
<form name="CVC" method="post" action="">
<br><b>CVC</b>
<br><b>Benefit Item</b>
<div> <label for="CVC_benefititems_0_comment" class="required">Comment</label> <input type="text" id="CVC_benefititems_0_comment" name="CVC[benefititems][0][comment]" required="required" maxlength="400" value="b1" /></div>
<br><b>Benefit Groups</b>
<ul class="benefitgroups" data-prototype="<div id="CVC_benefititems_0_benefitgroups___name__"><div> <label for="CVC_benefititems_0_benefitgroups___name___name" class="required">Name</label> <input type="text" id="CVC_benefititems_0_benefitgroups___name___name" name="CVC[benefititems][0][benefitgroups][__name__][name]" required="required" maxlength="100" /></div></div>">
<li><div> <label for="CVC_benefititems_0_benefitgroups_0_name" class="required">Name</label> <input type="text" id="CVC_benefititems_0_benefitgroups_0_name" name="CVC[benefititems][0][benefitgroups][0][name]" required="required" maxlength="100" value="c1b1" /></div></li>
<li><div> <label for="CVC_benefititems_0_benefitgroups_1_name" class="required">Name</label> <input type="text" id="CVC_benefititems_0_benefitgroups_1_name" name="CVC[benefititems][0][benefitgroups][3][name]" required="required" maxlength="100" value="c2b1" /></div></li>
</ul>
<br><b>Benefit Item</b>
<div> <label for="CVC_benefititems_1_comment" class="required">Comment</label> <input type="text" id="CVC_benefititems_1_comment" name="CVC[benefititems][4][comment]" required="required" maxlength="400" value="b2" /></div>
<br><b>Benefit Groups</b>
<ul class="benefitgroups" data-prototype="<div id="CVC_benefititems_1_benefitgroups___name__"><div> <label for="CVC_benefititems_1_benefitgroups___name___name" class="required">Name</label> <input type="text" id="CVC_benefititems_1_benefitgroups___name___name" name="CVC[benefititems][5][benefitgroups][__name__][name]" required="required" maxlength="100" /></div></div>">
<li><div> <label for="CVC_benefititems_1_benefitgroups_0_name" class="required">Name</label> <input type="text" id="CVC_benefititems_1_benefitgroups_0_name" name="CVC[benefititems][6][benefitgroups][0][name]" required="required" maxlength="100" value="c2b2" /></div></li>
</ul>
<div><button type="submit" id="CVC_submit" name="CVC[submit]">Do Something</button></div><input type="hidden" id="CVC__token" name="CVC[_token]" value="MEUAU3VawkCDJ5jTHo5hSTGrgrWS6XUm-UXeEI9onT8" /></form>
我希望使用表来完成所有这些工作，而不是使用列表（因此要在表中添加和删除行）。
最终目标（添加一个附加层）将是以下目标： 
乔塞梅佐
嗯，正如您所说，问题出在动态方面，也就是客户端。
但在此之前，请注意：永远不要在属性上打印html，请使用另一种技术，例如我正在使用的一种技术，例如模板（以替换prototypeattr）。还有很多更多的技术可以做到这一点，我只解释一下。
var $outerTemplate;
var $innerTemplate;
var $outerContainer;
jQuery(document).ready(function($) {
$outerTemplate = $('#top-form-template');
$innerTemplate = $('#inner-form-template');
$outerContainer = $("#row-container");
$("#addRow").on('click', function(e){
addOuterForm();
});
$outerContainer.on('click', '.addItem', function (e) {
addInnerForm(e.target.dataset.rowId);
})
$outerContainer.on('click', '.destroy-row', function (e) {
destroyRow(e.target.dataset.rowId);
});
$outerContainer.on('click', '.destroy-item', function (e) {
destroyItem(e.target.dataset.itemId);
});
});
function addOuterForm () {
var compiled = _.template($outerTemplate.html());
var html = compiled({
outerId: _.uniqueId(),
innerId: _.uniqueId()
});
$outerContainer.append(html);
}
function addInnerForm (outerId) {
var compiled = _.template($innerTemplate.html());
var html = compiled({
outerId: outerId,
innerId: _.uniqueId()
});
$outerContainer.find('#row-'+outerId).find('.benefitgroups').append(html);
}
function destroyRow(id){
$("#row-"+id).remove();
}
function destroyItem(id){
$("#item-"+id).remove();
}
我要做的是创建2个模板，一个模板用于外部表单（一个带有福利项目和组），另一个模板用于内部表单（额外的福利项目）。然后使用一些按钮连接并卸下它们。我请您看一下客户端的模板引擎（我注意到您知道如何使用Twig模板引擎，也许Handlebars会很容易为您服务）。
我使用lodash模板引擎，因为它非常简单，并且lodash工具非常强大且有用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
蓝屏死机没有修复解决方案
- 2
计算数据帧中每行的NA
- 3
UITableView的项目向下滚动后更改颜色，然后快速备份
- 4
Node.js中未捕获的异常错误，发生调用
- 5
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 6
Linux的官方Adobe Flash存储库是否已过时？
- 7
验证REST API参数
- 8
ggplot：对齐多个分面图-所有大小不同的分面
- 9
Mac OS X更新后的GRUB 2问题
- 10
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
- 11
带有错误“ where”条件的查询如何返回结果？
- 12
用日期数据透视表和日期顺序查询
- 13
VB.net将2条特定行导出到DataGridView
- 14
如何从视图一次更新多行（ASP.NET - Core）
- 15
Java Eclipse中的错误13，如何解决？
- 16
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 17
离子动态工具栏背景色
- 18
应用发明者仅从列表中选择一个随机项一次
- 19
当我尝试下载 StanfordNLP en 模型时，出现错误
- 20
python中的boto3文件上传
- 21
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
我来说两句