DropDownBox内的Devextreme多选列表答案

【问题标题】：Devextreme multiple selection List within a DropDownBoxDropDownBox内的Devextreme多选列表
【发布时间】：2019-11-13 16:40:41
【问题描述】：

我正在尝试使用 DevExtreme jQuery 构建一个多选下拉列表。我查看了 DevExpress 网站上的演示，它们使用 TreeView 或 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 和 Value 在这里相同，但有时可能不同）：

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

列表按原样显示，但我有两个问题：

当我在列表中选择一个或多个项目时，下拉框中不显示所选项目的文本（在演示中，它显示为逗号分隔的文本）。
我已将 list1 元素放入 HTML 表单（不是 DevExtreme 表单）中，但我不知道如何使用表单发布所选值（甚至在 jQuery 中获取它们）。

【问题讨论】：

标签： jquery drop-down-menu multi-select devextreme

【解决方案1】：

DevExtreme 还有一个TagBox component - 它是一个下拉编辑器，里面有列表和一个开箱即用的多重选择。这将是一个更好的解决方案。

如果你还想使用 DropDownBox 和 List 的组合，问题出在

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

DropDownBox 没有 "Value" 选项。您需要改为更改“value”：

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

如果你想获取组件的值，你应该使用这个选项：

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

见：Widget Basics - Get and Set Options

块引用

【讨论】：

【解决方案2】：

此代码还有一个问题，即与变量“e”存在变量冲突。在 onSelectionChanged 回调中，函数的变量应更改为“e”以外的其他值，以避免名称与 contentTemplate 外部定义中的“e”定义发生冲突。这是一个使用 '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/

【讨论】：

【解决方案3】：

$("#cust-select").dxDropDownBox({  
    value: [],  
    valueExpr: "Value",  
    placeholder: "-",  
    displayExpr: "Text",  
    showClearButton: true,  
    dataSource: JSON.parse($('#select-custvend').val()),  
    contentTemplate: function(e){  
        var value = e.component.option("value"),  
          $dataGrid = $("<div>").dxDataGrid({  
            dataSource: e.component.option("dataSource"),  
            columns: [{ dataField: "Text", caption: "Customer(s)" }],  
            hoverStateEnabled: true,  
            paging: { enabled: false },  
            filterRow: { visible: true },  
            scrolling: { mode: "infinite" },  
            height: 345,  
            selection: { mode: "multiple" },  
            selectedRowKeys: value,  
            onSelectionChanged: function(selectedItems){  
                var keys = selectedItems.selectedRowKeys;  
                e.component.option("value", keys);  
            },  
            width: "90%"  
          });  

        dataGrid = $dataGrid.dxDataGrid("instance");  

        e.component.on("valueChanged", function(args){  
            var value = args.value;  
            dataGrid.selectRows(value, false);  
        });  

        return $dataGrid;  
    }  
});

【讨论】：

请阅读this帮助页面，了解如何正确格式化代码。

【解决方案4】：

    url: '@Url.Action("GetTeam", "Team")',
    data: { dept: 0 },
    success: function (data) {
        $("#cbxTeam").dxDropDownBox({
            placeholder: @Json.Serialize(ViewData["Choose Team"].ToString()),
            displayExpr: name,
            showClearButton: true,
            dataSource: data,
            contentTemplate: function (e) {
                var value = e.component.option("value");

                $dataGrid = $("<div>").dxDataGrid({
                    dataSource: e.component.option("dataSource"),
                    columns: [name, 'g_ID'],
                    hoverStateEnabled: true,
                    paging: { enabled: true, pageSize: 10 },
                    filterRow: { visible: false },
                    showColumnHeaders: false,
                    scrolling: { mode: "infinite" },
                    height: 265,
                    selection: { mode: "multiple" },
                    selectedRowKeys: value,
                    onSelectionChanged: function (selectedItems) {
                        var keys = selectedItems.selectedRowKeys;
                        e.component.option("value", keys);
                    }
                });

                dataGrid = $dataGrid.dxDataGrid("instance");
                e.component.on("valueChanged", function (args) {
                    this.DefaultValueOne = args.value;
                    this.SelectedValues = args.value;
                    dataGrid.selectRows(args.value, false);

                   
                    txtTeam = "";
                    if (args.value != null) {
                        for (var i = 0; i < args.value.length; i++) {
                            if (i == args.value.length-1) {
                                txtTeam += args.value[i].g_ID;
                            } else {
                                txtTeam += args.value[i].g_ID + ",";
                            }
                            
                        }
                    }
                    //console.log(txtTeam);
                });

                return $dataGrid;
            }

【讨论】：