README

ESelect2 是 Yii 框架的一个小部件扩展。这个扩展是 Select2 Jquery 插件（https://github.com/ivaynberg/select2）的包装器。

要求

• Yii 1.1 或更高版本（已在 1.1.10 上测试）

用法

• 将下载的文件解压到您的应用程序扩展目录中
• 在视图中使用它

示例

基本

$this->widget('ext.select2.ESelect2', array(
 'name' => 'selectInput',
	'data' => array(
		0 => 'Nol',
		1 => 'Satu',
		2 => 'Dua',
	)
));

与模型一起使用

$this->widget('ext.select2.ESelect2', array(
	'model' => $model,
	'attribute' => 'attrName',
	'data' => array(
		0 => 'Nol',
		1 => 'Satu',
		2 => 'Dua',
	),
));

使用选择器

$tags = array('Satu', 'Dua', 'Tiga');
echo CHtml::textField('test', '', array('id' => 'test'));
$this->widget('ext.select2.ESelect2', array(
	'selector' => '#test',
	'options' => array(
		'tags' => $tags,
	),
));

使用 optgroup

$data = array(
	'one' => array(
		'1' => 'Satu',
		'2' => 'Dua',
		'3' => 'Tiga',
	),
	'two' => array(
		'4' => 'Sidji',
		'5' => 'Loro',
		'6' => 'Telu',
	),
	'three' => array(
		'7' => 'Hiji',
		'8' => 'Dua',
		'9' => 'Tilu',
	),
);

$this->widget('ext.select2.ESelect2', array(
	'name' => 'testing',
	'data' => $data,
));

多数据

$data = array(
	'1' => 'Satu',
	'2' => 'Dua',
	'3' => 'Tiga',
);

$this->widget('ext.select2.ESelect2', array(
	'name' => 'ajebajeb',
	'data' => $data,
	'htmlOptions' => array(
		'multiple' => 'multiple',
	),
));

占位符

$this->widget('ext.select2.ESelect2', array(
	'name' => 'asik2x',
	'data' => $data,
	'options' => array(
		'placeholder' => Yii::t('select2', 'Keren ya?'),
		'allowClear' => true,
	),
));

与远程数据一起使用

echo CHtml::textField('movieSearch', '', array('class' => 'span5'));
$this->widget('ext.select2.ESelect2', array(
	'selector' => '#movieSearch',
	'options' => array(
		'placeholder' => 'Search a movie',
		'minimumInputLength' => 1,
		'ajax' => array(
			'url' => 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
			'dataType' => 'jsonp',
			'data' => 'js: function(term,page) {
					return {
						q: term, 
						page_limit: 10,
						apikey: "e5mnmyr86jzb9dhae3ksgd73" // Please create your own key!
					};
				}',
			'results' => 'js: function(data,page){
				return {results: data.movies};
			}',
		),
		'formatResult' => 'js:function(movie){
			var markup = "<table class=\"movie-result\"><tr>";
			if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
				markup += "<td class=\"movie-image\"><img src=\"" + movie.posters.thumbnail + "\"/></td>";
			}
			markup += "<td class=\"movie-info\"><div class=\"movie-title\">" + movie.title + "</div>";
			if (movie.critics_consensus !== undefined) {
				markup += "<div class=\"movie-synopsis\">" + movie.critics_consensus + "</div>";
			}
			else if (movie.synopsis !== undefined) {
				markup += "<div class=\"movie-synopsis\">" + movie.synopsis + "</div>";
			}
			markup += "</td></tr></table>";
			return markup;
		}',
		'formatSelection' => 'js: function(movie) {
			return movie.title;
		}',
	),
));

资源

• Jquery 扩展 URL
• https://github.com/ivaynberg/select2
• 演示 http://ivaynberg.github.com/select2/
• Yii 扩展 URL
• https://yiiframework.cn/extension/select2/
• https://github.com/anggiaj/ESelect2