README

将 symfony 表单选择和实体字段转换为完全可配置的 bootstrap-select。

安装

将包添加到您的 composer.json 文件

require: {
    // ...
    "axiolab/bs-select-bundle": "2.0.3"
}

在内核中注册该包

// in AppKernel::registerBundles()
$bundles = [
    // ...
    new Axiolab\BootstrapSelectBundle\AxiolabBootstrapSelectBundle(),
    // ...
];

导入 bootstrapselect css 和 javascript

    {# Insert the following code in the <head> section of your layout #}
    {% stylesheets 'bundles/axiolabbootstrapselect/css/bootstrap-select.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    
    {% javascripts 'js/axiolabbootstrapselect.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

然后安装所需的资源

    ./app/console assets:install
    ./app/console assetic:dump
    ./app/console ca:cl

配置

最小配置

您可以在您的 config.yml 文件中自定义一些参数，以下是默认配置

    axiolab_bootstrap_select:
        form_resource: "AxiolabBootstrapSelectBundle:form:bootstrapSelect.html.twig" # If you want to change the botstrapselect widget template provide your template path here
        preferred_language: "en_US" # The language for the translations * 
        show_tick: true # Displays a check icon on the selected option(s)
        search_start: 3 # If you use bootstrapselect live_search with ajax, this is the minimum characters to provide before an ajax request is launched

*cf i18n 可用语言

表单小部件配置

以下是使用 bootstrapselect 表单类型的基配置（此包覆盖了每个 ChoiceType 及其子项）。请访问 bootstrap-select 主页获取更多信息。

    $builder->add(
        'toto', 
        EntityType::class,
        [
            'class' => 'AppBundle\Entity\Toto',
            'property' => 'tata',
            // The following options can be customized
            'selectpicker' => [
                'max_size' => 10, // The bootstrapselect only displays 10 options and a scrollbar
                'width' => '100%', 
                'placeholder' => 'search a tata for toto',
                'style' => 'btn-sm', // add the wished class to the bootstrapselect
                'subtext' => false, // Allows you to add subtext to your options
                'keywords' => false, // Allows you to add keywords to the live_search(ajax or not)
                'multiselect' => [ // Allows you to select many choices
                    'enabled' => false, //Enable/disable the multiselect
                    'max-options' => 5, // Set the maximum of selectable options
                    'selected_text_format' => "values", //See js plugin doc for more details
                ],
                'live_search' => [
                    'enabled' => true, //Enable/disable the live_search
                    'ajax' => false, //Enable/disable ajax for the live_search
                ],
            ],
            // Use the choice_attr option to dynamically set your keywords and subtext
            'choice_attr' => function($val, $key, $index) {
                return [
                    'keywords' => $val->getKeyword1() . " " . $val->getKeyword2()
                    'subtext' => $val->getSubtext()
                ];
            },

Ajax 数据加载

当 live_search[ajax] 选项设置为 true 时，该包允许您通过表单操作路由上的 POST ajax 请求加载数据。请求以以下参数获取

bsselect_search: 您正在搜索的字符
search_input_id: 选择输入的 id
search_input_name: 选择输入的名称

您的控制器操作必须返回一个包含您想要替换的输入的模板。如果您的输入是表单集合的一部分，您必须使用 search_input_id POST 手动设置返回输入的 id。

axiolab / bs-select-bundle

维护者

详细信息

README

安装

配置

最小配置

表单小部件配置

Ajax 数据加载