- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在尝试创建一个包含嵌套集合的表单。我不知道如何处理 JS 部分来显示子集合。有人知道我该怎么做吗?
这是我的表单代码:
class ParentFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('case', 'choice', array(
'choices' => array(
'case1' => 'case1',
'case2' => 'case2',
'case3' => 'case3',
)))
->add ('subForm1', 'collection', array (
'type' => new Sub1FormType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
'prototype' => true,
))
;
$builder->add('save',"submit") ;
}
public function setDefaultOptions(OptionsResolverInterface $resolver) {
}
public function getName() {
return 'formtestparenttype';
}
}
class Sub1FormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('fieldSub1',"text" )
->add ('childForm1', 'collection', array (
'type' => new Sub2FormType,
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
'prototype' => true,
))
;
}
public function setDefaultOptions(OptionsResolverInterface $resolver) {
}
public function getName() {
return 'formtestsub1type';
}
}
class Sub2FormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('fieldSub2',"text" )
;
}
public function setDefaultOptions(OptionsResolverInterface $resolver) {
}
public function getName() {
return 'formtesttype';
}
}
Controller :
$form = $this->createForm(new ParentFormType() ) ;
return $this->render('MyBundle:Test:test.html.twig', array(
'form' => $form->createView()
));
在这里; Twig + js 部分:
{% extends '::base.html.twig' %}
{% block content %}
{{ form_start(form) }}
<h3>Tags</h3>
<ul class="collectionHolder" data-prototype="{{ form_widget(form.subForm1.vars.prototype)|e }}">
{# iterate over each existing tag and render its only field: name #}
{% for subForm1 in form.subForm1 %}
<li>{{ form_row(subForm1) }} </li>
<ul class="collectionHolder" data-prototype="{{ form_widget(subForm2.vars.prototype)|e }}">
{%for subForm2 in subForm1.subForm2 %}
<li>{{ form_row(subForm2) }}</li>
{% endfor %}
{% endfor %}
</ul>
{{ form_end(form) }}
<script>
var $collectionHolder;
// setup an "add a tag" linkd
var $addTagLink = $('<a href="#" class="add_tag_link">Add</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);
jQuery(document).ready(function() {
function addTagForm($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 tag" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLi.before($newFormLi);
}
$collectionHolder = $('.collectionHolder');
$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);
$addTagLink.on('click', function(e) {
e.preventDefault();
addTagForm($collectionHolder, $newLinkLi);
});
});
</script>
{% endblock content %}
最佳答案
您的问题是示例 javascript 不是为一次处理多个集合而编写的。
我写了一个单独的 javascript 文件,在处理这些表单集合时我总是包含它:
// js/form.collection.js
function FormCollection(div_id)
{
// keep reference to self in all child functions
var self=this;
self.construct = function () {
// set some shortcuts
self.div = $('#'+div_id);
self.div.data('index', self.div.find(':input').length);
// add delete link to existing children
self.div.children().each(function() {
self.addDeleteLink($(this));
});
// add click event to the Add new button
self.div.next().on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
self.addNew();
});
};
/**
* onClick event handler -- adds a new input
*/
self.addNew = function () {
// Get the data-prototype explained earlier
var prototype = self.div.data('prototype');
// get the new index
var index = self.div.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
self.div.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
self.div.append($(newForm));
// add a delete link to the new form
self.addDeleteLink( $(self.div.children(':last-child')[0]) );
// not a very nice intergration.. but when creating stuff that has help icons,
// the popovers will not automatically be instantiated
//initHelpPopovers();
return $(newForm);
};
/**
* add Delete icon after input
* @param Element row
*/
self.addDeleteLink = function (row) {
var $removeFormA = $('<a href="#" class="btn btn-danger" tabindex="-1"><i class="entypo-trash"></i></a>');
$(row).find('select').after($removeFormA);
row.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
row.remove();
});
};
self.construct();
}
然后在所需的模板中,我只需按 id 定位集合并添加按 id 实例化 FormCollection,例如:
{% extends '::base.html.twig' %}
{% block content %}
{{ form_start(form) }}
<h3>Tags</h3>
<ul id="col-subform1" data-prototype="{{ form_widget(form.subForm1.vars.prototype)|e }}">
{# iterate over each existing tag and render its only field: name #}
{% for subForm1 in form.subForm1 %}
<li>{{ form_row(subForm1) }} </li>
<ul id="col-subform2" data-prototype="{{ form_widget(subForm2.vars.prototype)|e }}">
{%for subForm2 in subForm1.subForm2 %}
<li>{{ form_row(subForm2) }}</li>
{% endfor %}
{% endfor %}
</ul>
{{ form_end(form) }}
<script type="text/javascript" src="/js/form.collection.js"></script>
<script type="text/javascript">
new FormCollection('col-subform1');
new FormCollection('col-subform2');
</script>
关于javascript - 交响乐 2 : How to handle nested collections in forms,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26095864/
我想使用foreach 来等待线程终止。但是,出现以下错误,没有实现。请告诉我。 cannot move out of `*handle` which is behind a shared refer
如果在TypoScript中未配置给定的typeNum,则TYPO3将抛出Exception/CMS/1294587217。 背景:从另一个系统迁移到TYPO3后,我们遇到了许多此类异常,因为在那里使
我需要一个带有 2 个 handle 的 slider ,一个可拖动,另一个固定。我正在使用 Jquery UI slider 。这是我到目前为止尝试过的:http://jsfiddle.net/8K
给定文件的HANDLE(例如C:\\FolderA\\file.txt),我想要一个函数,该函数会将HANDLE返回到包含的目录(在前面的示例中,它将是C:\\FolderA的HANDLE)。例如:
我想通过Automic在Unix中检查文件。如果该文件不存在,则应切换主机并检查文件是否存在。 问题是,我现在不执行错误处理。 每当脚本对象正在处理并且找不到文件时,skript都会中止。我在skri
鉴于: fruitid('Apple', 'Granny Smith', 1). fruitid('Apple', 'Cox', 2). fruitid('Pear', 'Bartlett', 3).
我有一个基于Spring的Wicket应用程序。 有一个池化的数据源bean。 现在,当MySQL死了时,我得到了带有堆栈跟踪的默认Wicket错误页面。 我想处理这种情况,只允许某些页面完全显示(静
我希望能够一次查询多个句柄,其中表格具有相同的格式,例如: 句柄:8000,8001,8003表:foo 想要做这样的事情: x:hopen `8000`8001`8003 x select from
我对在Swift 3中引发自定义异常有些困惑。 在C++中,我可以执行此操作以立即停止方法中的进程,抛出错误并进行处理,而无需进一步进行操作。 void foo() { try {
我一直在阅读MSDN开发人员COM指南。但是this page上的代码令人困惑。在此处复制: The following code sample shows the recommended way o
我有一个计划的批处理文件每天都会启动的过程。如果有错误,我需要内置错误处理才能重启进程。所有这些在大多数情况下都有效,但是我每个月都会收到一次超时错误,所以这是不可避免的。该进程不会将错误级别输出到b
我正在尝试从 chartlyrics API 获取歌词。我编写了一个可以运行但不能在循环内运行的 R 函数。我的脚本是: library(httr) library(RCurl) library(XM
在libuv事件循环中调用prepare handle callback和check handle callback的原因是什么? 最佳答案 I/O 操作发生在这两者之间,因此您可能希望在阻塞 I/O
我正在尝试在 R 中安装 BTYplus 包。 devtools::install_github("mplatzer/BTYDplus", dependencies=TRUE) library(BTY
我有一个Arduino,可以使用pySerialTransfer库通过串行与Mac正常通信,并且可以运行数小时。然后是某种形式的串行中断-尽管一夜间发生时我一直无法确定原因,但只要从笔记本电脑上拔下A
我是hooks和async/await的新手。我正在尝试处理Axios调用中的错误,并且不确定如何使用then/catch或try/catch处理我的API调用中的错误。 在基于类的React中,我将
我正在尝试向脚本中添加一些内容,以便让我知道我复制的文件是否已被完全复制。 基本上,我要压缩一堆文件,然后将它们发送到网络上的映射驱动器。然后,一旦文件被成功复制,我将脚本删除原始位置的文件。该脚本可
我有一个圆形 slider ,其中绘制了一条贝塞尔弧,一个圆弧在 slider 的起点和终点有两个 handle ,圆弧是在圆形 slider 中绘制的。 借助开始和结束 handle ,我可以沿着圆
删除 NULL 指针是安全的。 int* p = NULL; delete p; // ok, secure 句柄是什么? HANDLE h = NULL; CloseHandle(h
如果您没有在 dojo.connect 期间返回的“句柄”,您如何删除 dojo 连接事件? 我的示例涉及将一组事件动态分配给一组对象。 (为简单起见,事件是 onclick 和 ondblclick
我是一名优秀的程序员,十分优秀!