Сетка пользовательского интерфейса Magento 2, не являющаяся поставщиком данных бд, и проблема с разбиением на страницы
Я пытаюсь использовать компонент сетки пользовательского интерфейса для создания сетки в серверной части, которая отображает информацию, которая не из базы данных. До сих пор я создавал XML-файлы, контроллер и пользовательский поставщик данных. Поставщик данных используется для переопределения некоторых методов, которые обычно используются, и он просто отправляет массив с фиктивными данными.
Это мой файл контроллера:
namespace MyVendor\LogViewer\Controller\Adminhtml\Index;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Backend\App\Action;
class Index extends Action
{
const ADMIN_RESOURCE = 'MyVendor_LogViewer::mylogviewer';
/**
* @var PageFactory
*/
protected $resultPageFactory;
/**
* @param Context $context
* @param PageFactory $resultPageFactory
*/
public function __construct(
Context $context,
PageFactory $resultPageFactory
)
{
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Index action
*
* @return \Magento\Backend\Model\View\Result\Page
*/
public function execute()
{
/** @var \Magento\Backend\Model\View\Result\Page $resultPage */
$resultPage = $this->resultPageFactory->create();
$resultPage->setActiveMenu('MyVendor_LogViewer::a_menu_item');
$resultPage->addBreadcrumb(__('Log Viewer'), __('Log Viewer'));
$resultPage->addBreadcrumb(__('Log Viewer'), __('Log Viewer'));
$resultPage->getConfig()->getTitle()->prepend(__('Log Viewer'));
return $resultPage;
}
/**
* {@inheritdoc}
*/
protected function _isAllowed()
{
return $this->_authorization->isAllowed(self::ADMIN_RESOURCE);
}
}
Это файл макета, который отображается контроллером, он ссылки на сетку пользовательского интерфейса:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<uiComponent name="my_logviewer_grid"/>
</referenceContainer>
</body>
</page>
Это мой view/adminhtml/ui_comonent/my_logviewer_grid.xml файл для конфигурации сетки:
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">my_logviewer_grid.my_logviewer_grid_data_source</item>
</item>
</argument>
<settings>
<spinner>my_logviewer_columns</spinner>
<deps>
<dep>my_logviewer_grid.my_logviewer_grid_data_source</dep>
</deps>
</settings>
<dataSource name="my_logviewer_grid_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">MyVendor\LogViewer\Ui\DataProvider\LogsProvider</argument>
<argument name="name" xsi:type="string">my_logviewer_grid_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">filename_id</argument>
<argument name="requestFieldName" xsi:type="string">filename_id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="update_url" xsi:type="url" path="mui/index/render"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</argument>
</dataSource>
<listingToolbar name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sticky" xsi:type="boolean">true</item>
</item>
</argument>
<filters name="listing_filters" displayArea="dataGridFilters">
<settings>
<dataScope>filters</dataScope>
<childDefaults>
<param name="imports" xsi:type="array">
<item name="visible" xsi:type="string">my_logviewer_grid.my_logviewer_grid.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
</param>
<param name="provider" xsi:type="string">my_logviewer_grid.my_logviewer_grid.listing_top.listing_filters</param>
</childDefaults>
<storageConfig>
<namespace>current.filters</namespace>
<provider>my_logviewer_grid.my_logviewer_grid.listing_top.bookmarks</provider>
</storageConfig>
</settings>
<filterInput name="filename_id" provider="${ $.parentName }">
<settings>
<label translate="true">Filename Id</label>
<dataScope>filename_id</dataScope>
</settings>
</filterInput>
</filters>
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">my_logviewer_grid.my_logviewer_grid.my_logviewer_columns.ids</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">my_logviewer_grid.my_logviewer_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
</item>
</argument>
</paging>
</listingToolbar>
<columns name="my_logviewer_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">my_logviewer_grid.my_logviewer_grid.my_logviewer_columns.actions</item>
<item name="target" xsi:type="string">applyAction</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">edit</item>
<item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
</item>
</item>
<item name="controlVisibility" xsi:type="boolean">true</item>
<item name="appendTo" xsi:type="string">my_logviewer_grid.my_logviewer_grid.listing_top.columns_controls</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">my_logviewer_grid.my_logviewer_grid.listing_top.bookmarks</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
</item>
</item>
</item>
</argument>
<column name="filename_id">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">File name</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
</column>
<column name="other_val">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="align" xsi:type="string">left</item>
<item name="label" xsi:type="string" translate="true">Other val</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
</column>
</columns>
</listing>
Наконец, вот мой поставщик данных, он находится в MyVendor/LogViewer/Ui/DataProvider/LogsProvider.php :
use Magento\Ui\DataProvider\AbstractDataProvider;
use Magento\Framework\App\Request\Http;
/**
* Class ProductDataProvider
*/
class LogsProvider extends AbstractDataProvider
{
/**
* @var \Magento\Ui\DataProvider\AddFieldToCollectionInterface[]
*/
protected $addFieldStrategies;
/**
* @var \Magento\Ui\DataProvider\AddFilterToCollectionInterface[]
*/
protected $addFilterStrategies;
/**
* @var \Magento\Framework\App\Request\Http
*/
protected $request;
/**
* Construct
*
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName
* @param array $meta
* @param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
Http $request,
array $meta = [],
array $data = []
) {
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
$this->request = $request;
}
/**
* Get data
*
* @return array
*/
public function getData()
{
$items = [
['filename_id' => "1", 'other_val' => 'dddd'],
['filename_id' => "2", 'other_val' => 'dddd'],
['filename_id' => "3", 'other_val' => 'dddd'],
['filename_id' => "4", 'other_val' => 'dddd'],
['filename_id' => "5", 'other_val' => 'dddd'],
['filename_id' => "6", 'other_val' => 'dddd'],
['filename_id' => "7", 'other_val' => 'dddd'],
['filename_id' => "8", 'other_val' => 'dddd'],
['filename_id' => "9", 'other_val' => 'dddd'],
['filename_id' => "10", 'other_val' => 'dddd'],
['filename_id' => "11", 'other_val' => 'dddd'],
['filename_id' => "12", 'other_val' => 'dddd'],
['filename_id' => "13", 'other_val' => 'dddd'],
['filename_id' => "14", 'other_val' => 'dddd'],
['filename_id' => "15", 'other_val' => 'dddd'],
['filename_id' => "16", 'other_val' => 'dddd'],
['filename_id' => "17", 'other_val' => 'dddd'],
['filename_id' => "18", 'other_val' => 'dddd'],
['filename_id' => "19", 'other_val' => 'dddd'],
['filename_id' => "20", 'other_val' => 'dddd'],
['filename_id' => "21", 'other_val' => 'dddd'],
['filename_id' => "22", 'other_val' => 'dddd'],
['filename_id' => "23", 'other_val' => 'dddd'],
['filename_id' => "24", 'other_val' => 'dddd'],
['filename_id' => "25", 'other_val' => 'dddd'],
['filename_id' => "26", 'other_val' => 'dddd'],
['filename_id' => "27", 'other_val' => 'dddd'],
];
$pagesize = intval($this->request->getParam('paging')['pageSize']);
$pageCurrent = intval($this->request->getParam('paging')['current']);
$pageoffset = ($pageCurrent - 1)*$pagesize;
return [
'totalRecords' => count($items),
'items' => array_slice($items,$pageoffset , $pageoffset+$pagesize),
];
}
// ###########################################
public function setLimit($offset, $size)
{
}
public function addOrder($field, $direction)
{
}
public function addFilter(\Magento\Framework\Api\Filter $filter)
{
}
}
В основном то, что я делаю с dataprovider, переопределяет функцию "getData" и просто передает некоторый случайный массив, который должен отображаться в сетке. У меня также есть некоторая логика в этом, чтобы заставить его работать переменные разбиения на страницы $_GET. Кроме того, я переопределяю функции "setLimit", "Addorder" и "addFilter", это просто для того, чтобы сетка работала правильно, насколько я могу судить, по крайней мере.
Итак, моя проблема сейчас в том, что разбивка на страницы работает неправильно. Когда я открываю страницу с сеткой, она отображается правильно, со столбцами "Имя файла" и "Другие значения", каждый из которых имеет свое правильное значение. Он отображает первые 20 элементов в этом массиве. Если я нажму кнопку "Далее" в разбивке на страницы, это также работает правильно, он показывает следующие 7 пунктов.
Проблема возникает, когда я нажимаю кнопку "Назад". В сетке пользовательского интерфейса, похоже, есть какая-то система кэширования, она не делает еще один запрос ajax, когда должна показывать результаты, которые вы уже видели раньше (я предполагаю, что она загружает откуда-то из модели просмотра js knockout). Итак, когда я нажимаю "назад", он просто показывает мне 27-й элемент массива 20 раз. То же самое произойдет, если я переключу нумерацию страниц с "20" на страницу на "30" на страницу, тогда переключите его обратно на "20". Вот как это выглядит:
Я не уверен, что является причиной этого или как это исправить. Любая помощь будет очень признательна.
2
Author: Grigoruta Cristian, 2018-01-16
1 answers
Попробуйте обновить XML-файл сетки следующим образом:
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">MyVendor\LogViewer\Ui\DataProvider\LogsProvider</argument>
<argument name="name" xsi:type="string">my_logviewer_grid_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">filename_id</argument>
<argument name="requestFieldName" xsi:type="string">filename_id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">filename_id</item>
</item>
</item>
</argument>
</argument>
4
Author: Zefiryn, 2018-01-16 21:39:44