在这篇博客中,我们将看到更多网格辅助ui组件到我们的网格。

其次组件为我们之前创建的网格添加了更多功能。

 

Export Button

<container name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
</item>
</argument>
<exportButton name="export_button">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.ids</item>
</item>
</argument>
</exportButton>
</container>

下面所有的xml标签都在'container标签内

 

Bookmark

<bookmark name="bookmarks">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">hello_world_grid</item>
</item>
</item>
</argument>
</bookmark>

Searching

<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">hello_world_grid.magease_hello_grid_data_source</item>
<item name="chipsProvider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.${ $.index }:visible</item>
</item>
</item>
</item>
</argument>
</filters>

Column Controls

<component name="columns_controls">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns</item>
</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</item>
</argument>
</component>

Paging

<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">hello_world_grid.hello_world_grid.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.ids</item>
</item>
</argument>
</paging>

Mass Action

<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">hello_world_grid.hello_world_grid.hello_world_columns.ids</item>
<item name="indexField" xsi:type="string">entity_id</item>
</item>
</argument>
<action name="delete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">delete</item>
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="url" path="hello/world/massDelete"/>
</item>
</argument>
</action>
</massaction>