moonlandsoft/bootui-select2

Select2 是一个基于 jQuery 的选择框替代方案。它支持搜索、远程数据集和结果的无限滚动。

安装次数: 2,619

依赖项: 0

建议者: 0

安全性: 0

星级: 1

关注者: 2

分支: 0

开放问题: 0

类型:yii2-extension

1.1.0 2017-01-23 01:22 UTC

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 添加类似 appendprepend 的 Bootstrap 输入组。
  • language 选择2本地化语言。
  • multiple 设置 true 以进行多选。
  • size 设置下拉列表的大小。有效值是 lgSelect2::LARGE 以及 smSelect2::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 文档

使用 functionobject 类型的示例

<?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"}]'),
]);