marciocamello/yii2-x-editable

X-editable extensions for Yii 2, based in X-editable with Bootstrap

MCMS X-Editable

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/, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

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

or add, _(*4)

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

to the require section of your composer.json file., _(*5)

Usage

Once the extension is installed, simply use it in your code by :, _(*6)

XEditable NameSpace and Model params

Actions

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

Text whitout model

 'With Xeditable'
]);

echo '
';

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

?>

Text

 $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

 $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

 $model,
    'placement' => 'right',
    'pluginOptions' => [
        'name' => 'content',
    ],
]);

?>

Select

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

Date

 $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

 $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

 $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

 $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

 'wysihtml5',
    'model' => $model,
    'pluginOptions' => [
        'toggle' => 'manual',
        'name' => 'content',
        'title' => 'Enter comments',
    ],
]); ?>

DataGrid

 \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

'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

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