moonlandsoft / bootui-select2
Select2 是一个基于 jQuery 的选择框替代方案。它支持搜索、远程数据集和结果的无限滚动。
1.1.0
2017-01-23 01:22 UTC
Requires
- yiisoft/yii2: *
This package is not auto-updated.
Last update: 2024-09-14 17:37:15 UTC
README
Select2 是一个基于 jQuery 的选择框替代方案。它支持搜索、远程数据集和结果的无限滚动。
安装
安装此扩展的首选方式是通过 composer。
运行以下命令之一:
php composer.phar require --prefer-dist moonlandsoft/bootui-select2 "*"
或者
"moonlandsoft/bootui-select2": "*"
将以下内容添加到您的 composer.json
文件的 require 部分。
用法
一旦安装了扩展,您只需在代码中简单地使用它即可
<?php echo Select2::widget([ 'name' => 'selection-name', 'value' => 'first', 'items' => ['first' => 'First Option', 'second' => 'Second Option', 'third' => 'Third Option'], 'options' => ['class' => 'form-control'], 'addon' => ['prepend' => 'Select'] ]); echo $form->field($model, 'attribute')->widget(Select2::className(), [ 'items' => ['first' => 'First Option', 'second' => 'Second Option', 'third' => 'Third Option'], 'options' => ['class' => 'form-control'], 'addon' => ['prepend' => 'Select'] ]);
属性
items
是一个数组数据选项。addon
添加类似append
或prepend
的 Bootstrap 输入组。language
选择2本地化语言。multiple
设置true
以进行多选。size
设置下拉列表的大小。有效值是lg
或Select2::LARGE
以及sm
或Select2::SMALL
。events
是底层 Select2 JavaScript 插件的的事件处理器。
示例
<?php use moonland\select2\Select2; echo $form->field($model, 'attribute1')->widget(Select2::className(), [ 'items' => ['first' => 'First Option', 'second' => 'Second Option', 'third' => 'Third Option'], 'size' => Select2::LARGE, 'addon' => [ 'prepend' => [Html::a('btn1', '#', ['class' => 'btn btn-default']), true], // prepend in single button, format [String $content, Boolean $asButton] 'append' => [ // append in multiple button. [bootui\Button::widget(['label' => 'btn 2']), true], [bootui\Button::className(), ['label' => 'btn 3'], true], // format [$className, Array $config, Boolean $asButton] ], ], ]); echo $form->field($model, 'attribute2')->widget(Select2::className(), [ 'items' => ['data1' => 'First Data', 'data2' => 'Second Data', 'data3' => 'Third Data'], 'events' => [ 'select2-opening' => 'function() { log("opening"); }', 'select2-open' => 'function() { log("open"); }', 'select2-close' => 'function() { log("close"); }', ], 'addon' => [ 'prepend' => 'Select Data', ], ]);
更多属性请参阅Select2 文档
使用 function
或 object
类型的示例
<?php echo Select2::widget([ //jquery inline function 'formatResult' => new JsExpression('function format(state) { if (!state.id) return state.text;return "" + state.text;}'), //call existing function 'formatSelection' => new JsExpression('formatSelection()'), //object 'data' => new JsExpression('[{id:0,text:"enhancement"},{id:1,text:"bug"},{id:2,text:"duplicate"},{id:3,text:"invalid"},{id:4,text:"wontfix"}]'), ]);