Редактирование таблицы 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; }
691 18.05.2020 г. Заметки Yii2