设置多选UI组件的默认值


13

我的magento 2安装中有一个自定义实体。
该实体中的字段之一是multiselect类型,包含所有国家/地区的列表。
我将ui组件用于我的管理表单。
由于选择中大约有200条记录,我不想使用多选字段,因为它不那么容易使用。
因此,我在添加/编辑产品管理部分中的类别类别中创建了一个精美的多选之一。
看起来更好,但是我无法为其设置默认值。
这是我的配置(请注意default配置项):

<field name="affected_countries" formElement="select" component="Magento_Ui/js/form/element/ui-select" sortOrder="100">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">article</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="default" xsi:type="string">RO,MD</item>
        </item>
    </argument>
    <settings>
        <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
        <dataType>text</dataType>
        <label translate="true">Affected Countries</label>
        <dataScope>affected_countries</dataScope>
        <componentType>field</componentType>
    </settings>
    <formElements>
        <select>
            <settings>
                <options class="Magento\Config\Model\Config\Source\Locale\Country"/>
            </settings>
        </select>
    </formElements>
</field>

结果是这样的:

我希望选择放置在默认字段中的2个值:

如果我将元素转换为简单的多选,则效果很好。

<field name="affected_countries" formElement="multiselect" sortOrder="100">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">article</item>
            <item name="default" xsi:type="string">RO,MD</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <label translate="true">Affected Countries</label>
        <dataScope>affected_countries</dataScope>
    </settings>
    <formElements>
        <multiselect>
            <settings>
                <options class="Magento\Config\Model\Config\Source\Locale\Country"/>
            </settings>
        </multiselect>
    </formElements>
</field>

我用这种格式default设置

<item name="default" xsi:type="string">RO,MD</item>

而且这个还:

<item name="default" xsi:type="array">
    <item name="MD" xsi:type="string">MD</item>
    <item name="RO" xsi:type="string">RO</item>
</item>

还尝试了标签select和标签multiselect内部formElements
我所有的尝试都以失败告终。

按照此处的说明(文本,选择,日期,...),default在其他任何类型的字段中使用设置都可以很好地工作。

对花式选择有什么建议吗?我错过了什么?

注意:我知道我可以在填充表单的数据提供程序中提供默认值,但是我试图避免这种情况,因为它看起来很丑陋,并且扩展性不强,并且与其余字段不一致。


您是否尝试过使用选项的ID?
Adrian Z.18年

MD和RO是选项的ID。就像我说的,它可以使用具有相同默认值的普通多重选择
Marius

<< items name =“ default” xsi:type =“ array”> </ items>
Idham Choudry

@IdhamChoudry我已经尝试过了。它在问题中是这样说的。
马里斯(Marius)

1
@LazyCoder对此有一个问题<options class="Magento\Config\Model\Config\Source\Locale\Country"/>。您需要一个类似的类来实现,\Magento\Framework\Option\ArrayInterface并具有一个称为的方法toOptionArray,该方法返回带有您的值的数组。数组中的每个元素都必须像这样['value' => ..., 'label' => ...]
Marius

Answers:


1

我曾为自定义类别工作过,但是在这种方法中,您必须通过数据库提供国家/地区数据,并从此代码中汲取灵感,并且可以通过扩展magento数据来提供Db或静态数据的数据,希望对您有所帮助

xml代码

    <field name="country_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\CountriesTree</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Country</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">category_id</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">30</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="index=create_category:responseData" xsi:type="string">setParsed</item>
                <item name="newOption" xsi:type="string">toggleOptionSelected</item>
            </item>
        </item>
    </argument>
</field>

科菲码

<?php

namespace Vendor\Module\Model\Config\Source;

class CountriesTree implements \Magento\Framework\Option\ArrayInterface
{

protected $_countryCollectionFactory;

protected $_options;

protected $_childs;


public function __construct(
    \Vendor\Module\Model\ResourceModel\Country\CollectionFactory 
 $countryCollectionFactory
) {
    $this->_countryCollectionFactory = $countryCollectionFactory;
}

public function toOptionArray()
{
    if ($this->_options === null) {
        $this->_options = $this->_getOptions();
    }
    return $this->_options;
}

protected function _getOptions($itemId = 0)
{
    $childs =  $this->_getChilds();
    $options = [];

    if (isset($childs[$itemId])) {
        foreach ($childs[$itemId] as $item) {
            $data = [
                'label' => $item->getCountry_title(),
                'value' => $item->getCountry_id(),
            ];

             if (isset($childs[$item->getCountry_id()])) {
                 $data['optgroup'] = $this->_getOptions($item->getCountry_id());
             }

            $options[] = $data;
        }
    }

    return $options;
}

protected function _getChilds()
{
    if ($this->_childs === null) {
        $this->_childs =  $this->_countryCollectionFactory->create()
            ->getGroupedChilds();
    }
    return $this->_childs;
}
}

输出看起来像这样 在此处输入图片说明


哦...但是这个问题是7个月前提出的:(
sheraz khan 18-10-29

这些值已经来自数据库。当我不编辑存储在数据库中的内容以预先选择默认值时,我只需要在“添加屏幕”上。我认为这不能解决我的问题。另外,我不需要树状结构。我只是一个简单的国家清单。
马里斯(Marius)

是的,我们必须为此使用默认数据,以我为例,我编写了dataprovider,但是在您这种情况下,这不是一种有效的方法,在您的情况下,通过xml是合适的
sheraz khan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.