opwoco / form-bundle
Symfony 3 表单类型,用于扩展内置类型。非常适合Select2 AJAX实现。
dev-master
2016-09-23 12:46 UTC
Requires
- symfony/framework-bundle: ~2.8|~3.0
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); }); });