在 Magento 2 后端进行修改的自定义网格
Custom grid with modifications in backend of Magento 2
我是 Magento2 开发新手。
现在我正在制作一个小模块,但我被困在一个地方。
我用 founded example 构建了管理网格,这是我的 di.xml:
<preference for="Magento\Catalog\Model\Product" type="Vendor\Module\Model\Product" />
<virtualType name="Vendor\Module\Model\ResourceModel\Grid\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">vendor_module</argument>
<argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid</argument>
</arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="grid_record_grid_list_data_source" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid\Grid\Collection</item>
</argument>
</arguments>
</type>
我还使用布局 XML 文件,里面有硬编码的列:
...
<column name="customer" >
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">false</item>
<item name="label" xsi:type="string" translate="true">Customer</item>
</item>
</argument>
</column>
...
我的 table 有如下列:产品 ID、客户 ID、价格、状态
我的问题是:
- 如何将客户 ID 转换为名字+姓氏?
- 列 “status” 有 3 种不同的状态(0、1 和 2)- 如何将它们转换为人类可读的单词? (未定义,好,坏)
- 如何向同一网格添加另一列,例如 $price + 10%?
在组件 XML 中,您可以定义一个 UI class 来帮助在 Magento 2 中显示 custom/readable 数据。核心中有许多示例,例如目录网格视图中显示的缩略图。
以此为例,下面是 catalog/view/adminhtml/ui_component/product_listing.xml
中的列定义:
<column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
<item name="add_field" xsi:type="boolean">true</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="altField" xsi:type="string">name</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
</column>
如您所见,有几个参数可以传递给列定义,包括一个组件,该组件取决于您要显示的数据类型。在这种情况下,它是一个缩略图。查看该 JS 文件表明,提取在以下方法中设置的数据以显示为实际缩略图是合乎逻辑的。这不一定是必需的。
在列标记上定义的 class 中,您会看到 Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail
。这是一个 class,它定义了数据显示方式的辅助方法,以及解析要以定义的列组件可以正确呈现它的方式显示的数据。
密切关注其中的方法 class, prepareDataSource
:
/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as & $item) {
$product = new \Magento\Framework\DataObject($item);
$imageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail');
$item[$fieldName . '_src'] = $imageHelper->getUrl();
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: $imageHelper->getLabel();
$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
'catalog/product/edit',
['id' => $product->getEntityId(), 'store' => $this->context->getRequestParam('store')]
);
$origImageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail_preview');
$item[$fieldName . '_orig_src'] = $origImageHelper->getUrl();
}
}
return $dataSource;
}
您可以使用此方法将要显示的数据格式化为您需要的格式。
例如,价格通过其定义的列 class 在目录网格(格式化为正确的货币)上显示的方式是:
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$store = $this->storeManager->getStore(
$this->context->getFilterParam('store_id', \Magento\Store\Model\Store::DEFAULT_STORE_ID)
);
$currency = $this->localeCurrency->getCurrency($store->getBaseCurrencyCode());
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as & $item) {
if (isset($item[$fieldName])) {
$item[$fieldName] = $currency->toCurrency(sprintf("%f", $item[$fieldName]));
}
}
}
return $dataSource;
}
我希望这有助于阐明如何在网格的列中格式化数据。
我是 Magento2 开发新手。 现在我正在制作一个小模块,但我被困在一个地方。 我用 founded example 构建了管理网格,这是我的 di.xml:
<preference for="Magento\Catalog\Model\Product" type="Vendor\Module\Model\Product" />
<virtualType name="Vendor\Module\Model\ResourceModel\Grid\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">vendor_module</argument>
<argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid</argument>
</arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="grid_record_grid_list_data_source" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid\Grid\Collection</item>
</argument>
</arguments>
</type>
我还使用布局 XML 文件,里面有硬编码的列:
...
<column name="customer" >
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">false</item>
<item name="label" xsi:type="string" translate="true">Customer</item>
</item>
</argument>
</column>
...
我的 table 有如下列:产品 ID、客户 ID、价格、状态
我的问题是:
- 如何将客户 ID 转换为名字+姓氏?
- 列 “status” 有 3 种不同的状态(0、1 和 2)- 如何将它们转换为人类可读的单词? (未定义,好,坏)
- 如何向同一网格添加另一列,例如 $price + 10%?
在组件 XML 中,您可以定义一个 UI class 来帮助在 Magento 2 中显示 custom/readable 数据。核心中有许多示例,例如目录网格视图中显示的缩略图。
以此为例,下面是 catalog/view/adminhtml/ui_component/product_listing.xml
中的列定义:
<column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
<item name="add_field" xsi:type="boolean">true</item>
<item name="sortable" xsi:type="boolean">false</item>
<item name="altField" xsi:type="string">name</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
</column>
如您所见,有几个参数可以传递给列定义,包括一个组件,该组件取决于您要显示的数据类型。在这种情况下,它是一个缩略图。查看该 JS 文件表明,提取在以下方法中设置的数据以显示为实际缩略图是合乎逻辑的。这不一定是必需的。
在列标记上定义的 class 中,您会看到 Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail
。这是一个 class,它定义了数据显示方式的辅助方法,以及解析要以定义的列组件可以正确呈现它的方式显示的数据。
密切关注其中的方法 class, prepareDataSource
:
/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as & $item) {
$product = new \Magento\Framework\DataObject($item);
$imageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail');
$item[$fieldName . '_src'] = $imageHelper->getUrl();
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: $imageHelper->getLabel();
$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
'catalog/product/edit',
['id' => $product->getEntityId(), 'store' => $this->context->getRequestParam('store')]
);
$origImageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail_preview');
$item[$fieldName . '_orig_src'] = $origImageHelper->getUrl();
}
}
return $dataSource;
}
您可以使用此方法将要显示的数据格式化为您需要的格式。
例如,价格通过其定义的列 class 在目录网格(格式化为正确的货币)上显示的方式是:
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
$store = $this->storeManager->getStore(
$this->context->getFilterParam('store_id', \Magento\Store\Model\Store::DEFAULT_STORE_ID)
);
$currency = $this->localeCurrency->getCurrency($store->getBaseCurrencyCode());
$fieldName = $this->getData('name');
foreach ($dataSource['data']['items'] as & $item) {
if (isset($item[$fieldName])) {
$item[$fieldName] = $currency->toCurrency(sprintf("%f", $item[$fieldName]));
}
}
}
return $dataSource;
}
我希望这有助于阐明如何在网格的列中格式化数据。