En Magento2 podemos incluir ciertos campos editables en linea en nuestra grilla. Esto suele ser útil para ahorrar tiempo y evitarnos el tener que editar los registros.
Para poder realizar este proceso tendremos que hacer lo siguiente:
En nuestro componente UI listing que se encarga de construir nuestra grilla dentro de la sección <columns> incluiremos la siguiente configuración:
- editorConfig es el controlador que se encarga de guardar los datos en linea hacia la base de datos.
- selectProvider le indica los datos que le tendremos que pasar.
- indexField es la clave primaria de la fila que estamos editando.
- clientConfig indica la opciones de configuración donde el elemento más importante es saveUrl en el que tendremos que indicar cual es el controlador que se encargará de editar los datos en linea.
- childDefaults es el segundo elemento en el apartado de configuración de la grilla.
- fieldAction nos permite definir las acciones cuando una campo es clikeado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="editorConfig" xsi:type="array"> <item name="selectProvider" xsi:type="string">news_news_listing.news_news_listing.news_news_columns.ids</item> <item name="enabled" xsi:type="boolean">true</item> <item name="indexField" xsi:type="string">news_id</item> <item name="clientConfig" xsi:type="array"> <item name="saveUrl" xsi:type="url" path="news/news/inlineEdit"/> <item name="validateBeforeSave" xsi:type="boolean">false</item> </item> </item> <item name="childDefaults" xsi:type="array"> <item name="fieldAction" xsi:type="array"> <item name="provider" xsi:type="string">news_news_listing.news_news_listing.news_news_columns_editor</item> <item name="target" xsi:type="string">startEdit</item> <item name="params" xsi:type="array"> <item name="0" xsi:type="string">${ $.$data.rowIndex }</item> <item name="1" xsi:type="boolean">true</item> </item> </item> </item> </item> </argument> |
Para permitir que una columna sea editable tendremos que incluir en el apartado de la configuración de cada columna un nuevo elemento llamado editor.
Hay dos elementos a tener en cuenta en nuestro editor en linea:
- editorType es el tipo de selector que vamos a incluir (text, select, date, dateRange, etc …)
- validation donde indicamos las reglas de validación.
|
1 2 3 4 5 6 |
<item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">false</item> </item> </item> |
El siguiente paso es crear el controlador donde lo querramos ubicar. En mi caso Controller/Adminhtml/News/InlineEdit.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<?php namespace <vendor>\<module>\Controller\Adminhtml\News; use Magento\Backend\App\Action; use Magento\Backend\App\Action\Context; use Magento\Framework\Controller\Result\JsonFactory; use <vendor>\<module>\Model\News; class InlineEdit extends Action { protected $jsonFactory; public function __construct ( Context $context, JsonFactory $jsonFactory ) { parent::__construct($context); $this->jsonFactory = $jsonFactory; } public function execute() { $resultJson = $this->jsonFactory->create(); $error = false; $messages = []; if ($this->getRequest()->getParam('isAjax')) { // Todos los datos de nuestra grilla $items = $this->getRequest()->getParam('items', []); // Sino hay datos recibidos if (!count($items)) { $messages[] = __('Please correct the data sent.'); $error = true; } else { // Recorremos los datos foreach (array_keys($items) as $newsId) { // nuestro modelo de datos $model = $this->_objectManager->create(News::class); $model->load($newsId); // sino hay errores try { $model->setData(array_merge($model->getData(), $items[$newsId])); $model->save(); } catch (\Exception $e) { $messages[] = $this->getErrorsNews( $model, __($e->getMessage()) ); $error = true; } } } } return $resultJson->setData([ 'messages' => $messages, 'error' => $error ]); } protected function getErrorsNews (News $news, $error) { return '[News ID: ' . $news->getId() . '] ' . $error; } } |
El resultado es el siguiente:
