README

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

安装

推荐通过composer安装此扩展。

运行以下命令

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

或者将以下内容添加到你的composer.json文件的require部分。

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

用法

扩展安装完成后，只需在你的代码中通过以下方式使用它：

操作

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

无模型的文本

echo \kotchuprik\xeditable\widgets\TextField::widget([
    'value' => 'With XEditableText',
]);

文本

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

手动切换文本

echo \kotchuprik\xeditable\widgets\TextField::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";
                }
            }
        ')
    ]
]);

文本区域

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

选择

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

日期

echo \kotchuprik\xeditable\widgets\Date::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,
            ],
        ],
    ],
]);

日期时间

echo \kotchuprik\xeditable\widgets\DateTime::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,
            ],
        ],
    ],
]);

组合日期

echo \kotchuprik\xeditable\widgets\ComboDate::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,
            ],
        ],
    ]
]);

检查列表

echo \kotchuprik\xeditable\widgets\CheckList::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

echo \kotchuprik\xeditable\widgets\WysiHtml5::widget([
    'model' => $model,
    'pluginOptions' => [
        'toggle' => 'manual',
        'name' => 'content',
        'title' => 'Enter comments',
    ],
]);

Select2

$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

$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,
        ],
    ]
]);

数据网格

$provider = new \yii\data\ActiveDataProvider([
    'query' => Categories::find(),
    'pagination' => [
        'pageSize' => 4,
    ],
]);

echo GridView::widget([
    'id' => Yii::$app->controller->id,
    'dataProvider' => $provider,
    'columns' => [
        [
            'value' => function($model) {
                return $model->active;
            },
            'class' => 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',
    ],
]);

特性

• 支持服务器端验证（验证后输出错误消息）。