opwoco/form-bundle

Symfony 3 表单类型,用于扩展内置类型。非常适合Select2 AJAX实现。

dev-master 2016-09-23 12:46 UTC

This package is not auto-updated.

Last update: 2024-09-14 19:25:46 UTC


README

本捆绑包提供扩展ChoiceType、EntityType和DocumentType的FormTypes,以便它们可以接受客户端添加的附加选项。

非常适合Select2集成。

与Symfony ~2.8 || ~3.0兼容

特性

本捆绑包提供6个FormTypes,旨在自动化一些常见任务

  • AutocompleteType : 内置TextType的扩展

    • 配置 : 将%alsatian_form.parameters.autocomplete.attr_class%插入为HTML输入的class。
    • 选项 : 'route'和'route_params'在HTML输入中渲染data-ajax--url标签。
  • DatepickerType : 内置DateType的扩展

    • 自动 : 使用\IntlDateFormatter::SHORT设置日期模式,并将其作为'pattern'属性渲染在HTML输入中。
    • 配置 : 将%alsatian_form.parameters.date_picker.attr_class%插入为HTML输入的class。
  • DateTimepickerType : 内置DateTimeType的扩展

    • 自动 : 使用\IntlDateFormatter::SHORT设置日期模式,并将其作为'pattern'属性渲染在HTML输入中。
    • 配置 : 将%alsatian_form.parameters.datetime_picker.attr_class%插入为HTML输入的class。
  • ExtensibleChoiceType : 内置ChoiceType的扩展

    • 自动 : 以空的HTML选择开始,并接受在客户端添加的每个提交的选项。
    • 配置 : 将%alsatian_form.parameters.extensible_choice.attr_class%插入为HTML选择器的class。
    • 选项 : 'route'和'route_params'在HTML选择器中渲染data-ajax--url标签。
  • ExtensibleDocumentType : 内置DocumentType的扩展

    • 自动 : 以空的HTML选择开始,并接受在客户端添加的每个有效文档。
    • 配置 : 将%alsatian_form.parameters.extensible_document.attr_class%插入为HTML选择器的class。
    • 选项 : 'route'和'route_params'在HTML选择器中渲染data-ajax--url标签。
  • ExtensibleEntityType : 内置EntityType的扩展

    • 自动 : 以空的HTML选择开始,并接受在客户端添加的每个有效实体。
    • 配置 : 将%alsatian_form.parameters.extensible_entity.attr_class%插入为HTML选择器的class。
    • 选项 : 'route'和'route_params'在HTML选择器中渲染data-ajax--url标签。

安装

使用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);
	});
});