kotchuprik/yii2-x-editable

X-editable extensions for Yii 2. Fork marciocamello/yii2-x-editable with some features.

v1.0 2014-08-20 05:50 UTC

Requires

• yiisoft/yii2: *
• yiisoft/yii2-bootstrap: *

BSD-3-Clause

• Constantin Chuprik
• MarcioCamello

• extension
• yii2
• x-editable

README

X-editable extensions for Yii 2, based in X-editable 1.5.1 with Bootstrap 3 Link from project - http://vitalets.github.io/x-editable/

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

Actions

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

Text whitout model

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

Text

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

Text Toggle Manual

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

TextArea

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

Select

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

Date

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

DateTime

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

ComboDate

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

Checklist

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

TypeAheadJs

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

DataGrid

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

Features

• Server-side validation support (error messages output after validation).