当前位置: 技术文章>> magento2中的UI组件之LinkColumn 组件以及代码示例

文章标题:magento2中的UI组件之LinkColumn 组件以及代码示例
  • 文章分类: Magento
  • 10822 阅读
系统学习magento二次开发,推荐小册:《Magento中文全栈二次开发 》

本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。


在 Magento 2 中,LinkColumn 组件是一种 UI 组件,用于在列表(网格)中显示链接。LinkColumn 组件可以很方便地实现点击链接跳转到指定页面的功能,例如跳转到编辑页面或者查看页面等。

以下是一个示例代码,展示如何在 Magento 2 中使用 LinkColumn 组件来创建一个产品列表,并在列表中显示一个链接列。

<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">product_listing.product_listing_data_source</item>
            <item name="deps" xsi:type="string">product_listing.product_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">product_columns</item>
        <item name="exports" xsi:type="array">
            <item name="globalRecordId" xsi:type="string">global_record_id</item>
        </item>
    </argument>
    <dataSource name="product_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider</argument>
            <argument name="name" xsi:type="string">product_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">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>
    <columns name="product_columns">
        <column name="entity_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortable" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                    <item name="sortDirection" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <column name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortable" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="label" xsi:type="string" translate="true">Name</item>
                </item>
            </argument>
        </column>
        <column name="sku">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortable" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                    <item name="label" xsi:type="string" translate="true">SKU</item>
        </argument>
    </column>
    <column name="link" class="Magento\Ui\Component\Listing\Columns\Link">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">999</item>
                <item name="viewUrlPath" xsi:type="string">catalog/product/edit</item>
                <item name="urlEntityParamName" xsi:type="string">id</item>
            </item>
        </argument>
        <argument name="display" xsi:type="string">link</argument>
        <argument name="label" xsi:type="string" translate="true">Edit</argument>
    </column>
</columns>
</listing>

在上面的代码中,LinkColumn 组件被定义为一个名为 link 的列,并使用了 Magento 自带的 Magento\Ui\Component\Listing\Columns\Link 类来实现链接的功能。通过设置 viewUrlPath 参数,指定了要跳转的页面路径,通过 urlEntityParamName 参数指定了要传递给目标页面的参数名。最后,通过 label 参数设置了在列表中显示的链接文本。


推荐文章