Редактирование таблицы GridView Yii2

Отличное решение для тех кто хочет редактировать данные прямо в GridView Yii2. Решение придумал пользователь на форуме Prooksius.

1) Добавляем в GridView:

[
   'attribute' => 'list_count',
   'contentOptions'   =>   ['class' => 'td-editing'],
   'value' => function ($data) {
      $html  = html::beginForm(Url::to(['update', 'id' => $data->id]));
      $html .= html::activeTextInput($data, 'list_count', ['class' => 'form-control grid-editable', 'label' => false,]);
      $html .= html::endForm();
      return $html;
   },
   'format' => 'raw',
],

2) Это в контроллере  для actionUpdate (после сохранения и перед редиректом):

if (Yii::$app->request->get('inplace_edit', '0') == '1') {
   return \yii\helpers\Json::encode('1');
}

3) Это в JS (после успешного сохранения будет добавлен класс updated на 3 секунды):

$(document).on('change', '.grid-editable', function() {
    let cur_input = $(this),
        cur_form = $(this).closest('form'),
        formData = cur_form.find('input, select'),
        action = cur_form.attr('action');
    $.ajax({
        url: action + '&inplace_edit=1',
        data: formData,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            if (data === '1') {
                cur_input.addClass('updated');
            }
            setTimeout(function(){
                cur_input.removeClass('updated');
            }, 3000)
        }
    });
});

4) И визуальный эффект сохранения в CSS:

.td-editing input{
    font-size: 12px;
    padding: 0 10px 2px;
    height: unset;
    border: unset;
    background: unset;
    border-bottom: 1px dashed #cecece;
    text-align: center;
}
.td-editing .updated{
    border-color: #00a65a;
    color: #00a65a;
    font-weight: 600;
}

1531 18.05.2020 г. Заметки Yii2

Комментарии (0)