Multi Select có nghĩa là bạn có thể chọn được nhiều field hơn, trong khi đó select thông thường chỉ chọn được một field. Do đó sử dụng multi select bạn có thể filter được nhiều giá trị hơn và cũng thuận tiện hơn khi sử dụng grid trong admin.
Giả sử bạn muốn filter product theo type là simple và configrable và hiển thị tất cả các product có type đã chọn. Nhưng bạn không thể làm được điều đó vì mặc định Magento chỉ filter theo 1 option của column tại cùng một thời điểm.
Trong bài viết này tôi sẽ hướng dẫn các bạn thêm multi select filter vào admin grid trong Magento 2 . Nếu làm đúng thì bạn sẽ có được kết quả như hình bên dưới:
[Vendor]/[Module]/view/adminhtml/ui_component/mygrid_listing.xml
|
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 |
<filters name="listing_filters"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="templates" xsi:type="array"> <item name="filters" xsi:type="array"> <item name="select" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item> <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item> </item> </item> </item> </item> </argument> </filters> //Columns <column name="status" component="Magento_Ui/js/grid/columns/select" sortOrder="50"> <settings> <filter>select</filter> <dataType>select</dataType> <options class="[Vendor]\[Module]\Model\OptionSource\Status" /> <label translate="true">Brand</label> </settings> </column> |
[Vendor]\[Module]\Model\OptionSource\Status.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php namespace [Vendor]\[Module]\Model\ProductImage; class Status implements \Magento\Framework\Option\ArrayInterface { public function toOptionArray() { $options = []; $options[] = ['label' => 'Unused image', 'value' => '0']; $options[] = ['label' => 'Used image', 'value' => '1']; return $options; } } |
Chỉ đơn giản như vậy là xong rồi nhé. Cám ơn các bạn!