README

基于 X-editable 1.5.1 和 Bootstrap 3 的 Yii 2 X-editable 扩展，项目链接 - http://vitalets.github.io/x-editable/

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

php composer.phar require marciocamello/yii2-x-editable "dev-master"

或者在您的 composer.json 文件的 require 部分添加

"marciocamello/yii2-x-editable": "*"

to

使用

扩展安装后，只需在代码中使用即可

XEditable 命名空间和模型参数

<?php

use mcms\xeditable\XEditable;

$model = Model::findOne($id);

?>

操作

	public function actions()
	{
		return [
			'editable' => [
				'class' => 'mcms\xeditable\XEditableAction',
				//'scenario'=>'editable',  //optional
				'modelclass' => Model::className(),
			],
		];
	}

无模型的文本

<?php

echo XEditable::widget([
	'value' => 'With Xeditable'
]);

echo '<br>';

echo \mcms\xeditable\XEditableText::widget([
	'value' => 'With XEditableText'
]);

?>

文本

<?php

echo \mcms\xeditable\XEditableText::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'name' => 'title',
	],
	'callbacks' => [
		'validate' => new \yii\web\JsExpression('
			function(value) {
				if($.trim(value) == "") {
					return "This field is required";
				}
			}
		')
	]
]);

?>

手动切换文本

<?php

echo \mcms\xeditable\XEditableText::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'toggle' => 'manual',
		'name' => 'title',
	],
	'callbacks' => [
		'validate' => new \yii\web\JsExpression('
			function(value) {
				if($.trim(value) == "") {
					return "This field is required";
				}
			}
		')
	]
]);

?>

文本区域

<?php

echo \mcms\xeditable\XEditableTextArea::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'name' => 'content',
	],
]);

?>

选择

<?php

echo \mcms\xeditable\XEditableSelect::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'name' => 'status',
		'source'=>[
			['value'=>1,
				'text'=>Yii::t('app','On')],
			['value'=>0,
				'text'=>Yii::t('app','Off')]
		],
	],
]); ?>

日期

<?php

echo \mcms\xeditable\XEditableDate::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'name' => 'created_at',
		'value' => date('Y-m-d',$model->created_at),
		'format' => 'yyyy-mm-dd',
		'viewformat' => 'dd/mm/yyyy',
		'datepicker' => [
			[
				'weekStart' => 1
			]
		],
	]
]); ?>

日期时间

<?php

echo \mcms\xeditable\XEditableDateTime::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'name' => 'created_at',
		'value' => date('Y-m-d h:i',$model->created_at),
		'format' => 'yyyy-mm-dd hh:ii',
		'viewformat' => 'dd/mm/yyyy hh:ii',
		'datepicker' => [
			[
				'weekStart' => 1
			]
		],
	]
]); ?>

组合日期

<?php

echo \mcms\xeditable\XEditableComboDate::widget([
	'model' => $model,
	'placement' => 'right',
	'type' => 'combodate',
	'pluginOptions' => [
		'name' => 'created_at',
		'value' => date('Y-m-d h:i',$model->created_at),
		'format'      => 'YYYY-MM-DD HH:mm',
		'viewformat'  => 'MMM DD, YYYY HH:mm',
		'template'    => 'DD / MMM / YYYY HH:mm',
		'combodate' => [
			[
				'minYear' => '2000',
				'maxYear' => '2015',
				'minuteStep' => '1'
			]
		],
	]
]); ?>

检查列表

<?php

echo \mcms\xeditable\XEditableCheckList::widget([
	'model' => $model,
	'placement' => 'right',
	'pluginOptions' => [
		'name' => 'image',
		'source'=>[
			['value'=>'option1',
				'text'=>Yii::t('app','option1')],
			['value'=>'option2',
				'text'=>Yii::t('app','option2')],
			['value'=>'option3',
				'text'=>Yii::t('app','option3')]
		],
	],
]); ?>

HTML 编辑器 - WysiHtml5

<?php

echo \mcms\xeditable\XEditableWysiHtml5::widget([
	'type' => 'wysihtml5',
	'model' => $model,
	'pluginOptions' => [
		'toggle' => 'manual',
		'name' => 'content',
		'title' => 'Enter comments',
	],
]); ?>

数据网格

<?php
$provider = new \yii\data\ActiveDataProvider([
	'query' => \backend\modules\cms\models\Categories::find(),
	'pagination' => [
		'pageSize' => 4,
	],
]);

echo GridView::widget([
	'id' => Yii::$app->controller->id,
	'dataProvider' => $provider,
	'columns' => [
		[
			'value'=>function($model) {
				return $model->active;
			},
			'class' => \mcms\xeditable\XEditableColumn::className(),
			'url' => 'editable',
			'dataType'=>'select',
			'editable'=>[
				'source'=>[
					['value'=>1,
						'text'=>Yii::t('app','On')],
					['value'=>0,
						'text'=>Yii::t('app','Off')]
				],
				'placement' => 'right',
			],
			'attribute' => 'status',
			'format' => 'raw',
		],
		'title',
	]
]);
?>

Select2

<?php

$items = [
	['value'=>'gb',
		'text'=>Yii::t('app','Great Britain')],
	['value'=>'us',
		'text'=>Yii::t('app','United States')],
	['value'=>'ru',
		'text'=>Yii::t('app','Russia')]
];

echo XEditable::widget([
	'placement' => 'right',
	'type' => 'select2',
	'pluginOptions' => [
		'value' => 'ru',
		'source'=> $items,
		'select2' => [
			'multiple' => true
		],
	]
]); ?>

自动完成 Js

<?php

$items = [
	['value'=>'gb',
		'text'=>Yii::t('app','Great Britain')],
	['value'=>'us',
		'text'=>Yii::t('app','United States')],
	['value'=>'ru',
		'text'=>Yii::t('app','Russia')]
];

echo XEditable::widget([
	'placement' => 'right',
	'type' => 'typeaheadjs',
	'pluginOptions' => [
		'value' => 'ru',
		'typeahead' => [
			'name' => 'country',
			'local' => $items,
		],
	]
]); ?>