README

此包提供扩展 ChoiceType、EntityType 和 DocumentType 的 FormTypes，以便它们能够接受客户端添加的额外选择。

非常适合 Select2 集成。

对于 Symfony >= 4.4 使用版本 1.1，对于 Symfony 2.8 到 4.3 使用版本 1.0

特性

该包提供 6 种 FormTypes，旨在自动化一些常见任务

• ExtensibleChoiceType : ChoiceType 扩展

  选择类型，以空的 HTML select 开头，并接受客户端添加的每个提交的选择。

  • 配置：将 %alsatian_form.parameters.extensible_choice.attr_class% 作为 HTML select 的类插入。
  • 选项：'route' 和 'route_params' 以在 HTML select 中渲染 data-ajax--url 标签。

• ExtensibleEntityType : EntityType 扩展

  实体类型以空的 HTML select 开头，并接受客户端添加的每个现有实体。

  • 配置：将 %alsatian_form.parameters.extensible_entity.attr_class% 作为 HTML select 的类插入。
  • 选项：'route' 和 'route_params' 以在 HTML select 中渲染 data-ajax--url 标签。

• ExtensibleDocumentType : DoctrineMongoDBBundle DocumentType 扩展

  文档类型以空的 HTML select 开头，并接受客户端添加的每个现有文档。

  • 配置：将 %alsatian_form.parameters.extensible_document.attr_class% 作为 HTML select 的类插入。
  • 选项：'route' 和 'route_params' 以在 HTML select 中渲染 data-ajax--url 标签。

• AutocompleteType : TextType 扩展

  文本类型允许添加一些 HTML 属性以公开用于自动完成的 AJAX 路由。

  • 配置：将 %alsatian_form.parameters.autocomplete.attr_class% 作为 HTML input 的类插入。
  • 选项：'route' 和 'route_params' 以在 HTML input 中渲染 data-ajax--url 标签。

• DatepickerType : DateType 扩展

  日期类型，其中日期模式作为 HTML input 的 'pattern' 属性渲染（使用 \IntlDateFormatter::SHORT）。

  • 配置：将 %alsatian_form.parameters.date_picker.attr_class% 作为 HTML input 的类插入。

• DateTimepickerType : DateTimeType 扩展

  DateTime 类型，其中日期模式作为 HTML input 的 'pattern' 属性渲染（使用 \IntlDateFormatter::SHORT）。

  • 配置：将 %alsatian_form.parameters.datetime_picker.attr_class% 作为 HTML input 的类插入。

安装

使用 composer 下载包

    composer require alsatian/form-bundle

启用包

将包添加到 app/AppKernel.php

// app/AppKernel.php

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...

            new Alsatian\FormBundle\AlsatianFormBundle(),
        );

        // ...
    }

    // ...
}

配置

将以下行添加到 app/config/config.yml

alsatian_form:
    extensible_choice: ~   # To enable Alsatian\FormBundle\Form\ExtensibleChoiceType
    extensible_entity: ~   # To enable Alsatian\FormBundle\Form\ExtensibleEntityType
    extensible_document: ~ # To enable Alsatian\FormBundle\Form\ExtensibleDocumentType

对于每个 FormType，您可以配置一个默认的 attr_class 参数，如下所示

alsatian_form:
    extensible_choice:
        attr_class: select2 # Adds class="select2" in the HTML select element
    extensible_entity:
        attr_class: select2-entity # Adds class="select2-entity" in the HTML select element
    extensible_document:
        attr_class: select2-document # Adds class="select2-document" in the HTML select element

用法

要使用这些 FormTypes

    use Alsatian\FormBundle\Form\ExtensibleChoiceType;
    use Alsatian\FormBundle\Form\ExtensibleEntityType;
    use Alsatian\FormBundle\Form\ExtensibleDocumentType;
    
    // Without route
    $builder->add('extensible_choice', ExtensibleChoiceType::class);
    $builder->add('extensible_entity', ExtensibleEntityType::class,array('class'=>'AppBundle:Article','choice_label'=>'name'));
    $builder->add('extensible_document', ExtensibleDocumentType::class,array('class'=>'AppBundle:Article','choice_label'=>'name'));

    // With route (generate the route defined as 'route' option and renders it as 'data-ajax-url' html attribute)
    $builder->add('extensible_choice', ExtensibleChoiceType::class,array('route'=>'ajax_choices'));
    $builder->add('extensible_entity', ExtensibleEntityType::class,array('route'=>'ajax_entities','class'=>'AppBundle:Article','choice_label'=>'name'));
    $builder->add('extensible_document', ExtensibleDocumentType::class,array('route'=>'ajax_documents','class'=>'AppBundle:Article','choice_label'=>'name'));

这将渲染如下 HTML

<!-- if %alsatian_form.extensible_choice.attr_class% = 'select2' -->
<select data-ajax--url="%your_route%" class="select2">
</select>

此包的目标仅限于服务器端工作（允许“可扩展”选择）。您必须编写自己的 JavaScript 适配器以使其与 Select2 一起工作。

以下是如何使用它的示例

$(document).ready(function(){
	$('.select2').each(function(){
		var configs={
		        allowClear: true,
		        width:'resolve',
			ajax:{
				data: function (params) {return {q: params.term};},
				dataType:'json',delay: 250,
				processResults: function (data) {
					var dataresults = [];
					$.each(data, function(key, val){
						dataresults.push({id: val[0], text: val[1]});
					});
					return { results: dataresults };
				}
			};
		};

		$(this).select2(configs);
	});
});