Список множественного выбора Devextreme в DropDownBox

Я пытаюсь создать раскрывающийся список с множественным выбором с помощью DevExtreme jQuery. Я просмотрел демонстрации на веб-сайте DevExpress, они используют TreeView или Grid внутри DropDownBox. Адаптируя этот код, вот что я написал:

$('#list1').dxDropDownBox({
showClearButton: true,
valueExpr: 'Value',
displayExpr: 'Text',
dataSource: new DevExpress.data.ArrayStore({
    data: source,
    key: 'Value'
}),
contentTemplate: function (e) {
    var value = e.component.option("Value"),
        $list = $("<div>").dxList({
            dataSource: e.component.option("dataSource"),
            valueExpr: 'Value',
            displayExpr: 'Text',
            showSelectionControls: true,
            selectionMode: "all",
            selectedItemKeys: value,
            onSelectionChanged: function (e) {
                var selectedKeys = e.component.option("selectedItemKeys");
                e.component.option("Value", selectedKeys);
            }
        });

    return $list;
},

});

Источником является массив объектов с двумя свойствами (Текст и Значение здесь одинаковы, но иногда они могут быть разными):

[{"Text":"2000","Value":"2000"},{"Text":"2005","Value":"2005"}]

Список отображается так, как должен, но у меня есть две проблемы:

  • Когда я выбираю один или несколько элементов в списке, тексты выбранных элементов не отображаются в раскрывающемся списке (в демонстрациях он отображается в виде текста, разделенного запятыми).
  • Я поместил элемент list1 в HTML-форму (а не в форму DevExtreme) и не знаю, как опубликовать выбранные значения в форме (или даже получить их в jQuery).

drop-down-menu jquery devextreme multi-select
person GerardF    schedule 13.11.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В DevExtreme также есть компонент TagBox — это раскрывающийся редактор со списком внутри и множественным выбором из коробки. Это будет лучшее решение.

Если вы все еще хотите использовать комбинацию DropDownBox и List, проблема в

e.component.option("Value", selectedKeys);

В DropDownBox нет параметра "Значение". Вместо этого вам нужно изменить "значение":

e.component.option("value", selectedKeys);

Вы должны использовать эту опцию, если хотите получить значение компонента:

$('#list1').dxDropDownBox("instance").option("value");

См.: Основные сведения о виджетах — параметры получения и установки

Цитата

person sometimes_elen    schedule 27.11.2019

arrow_upward
0
arrow_downward

В этом коде есть дополнительная проблема, заключающаяся в конфликте переменной с переменной 'e'. В обратном вызове onSelectionChanged переменная функции должна быть изменена на что-то отличное от «e», чтобы избежать конфликта имени с определением «e» во внешнем определении contentTemplate. Вот пример использования «arg» вместо «e»:

onSelectionChanged: function (arg) {
    var selectedKeys = arg.component.option("selectedItemKeys");
    e.component.option("value", selectedKeys);
}

Таким образом, «arg» теперь относится к выбору в списке флажков, а затем эти элементы правильно отображаются в родительском элементе управления, разделенные запятыми.

Также см. простой пример на веб-сайте DevExpress по адресу: https://js.devexpress.com/Documentation/Guide/Widgets/DropDownBox/Overview/

person Byron Douglas    schedule 09.09.2020

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, прочитайте эту справочную страницу о том, как правильно форматировать код. - person costaparas; 26.01.2021