来自多个父母的 kendoComboBox 级联答案

【问题标题】：kendoComboBox Cascade from multiple parents来自多个父母的 kendoComboBox 级联
【发布时间】：2023-03-22 17:45:01
【问题描述】：

如何在 kendoUi 的 kendoComboBox 中从多个父级级联？

假设我必须父组合框；组合框A : [A,B,C,D] 和组合框B : [1,2,3,4] 并且从两个组合框中的字段 'desc' 级联将返回 [A,B,C,D,1,2,3,4]

$('#comboBoxChild').kendoComboBox({
 cascadeFrom: ??
});

【问题讨论】：

什么是'desc'？
如果 comboBoxA 和 ComboBoxB 是您的类别，那么您的 cascadeFrom 应该是 comboBoxA 或/和 ComboBoxB。
@SalomonZhang 是的，我想从 comboBoxA 和 comboBoxB 级联。我该怎么做？

标签： jquery kendo-ui kendo-combobox

【解决方案1】：

以下代码来自官方的 Kendo UI Jquery 演示，清楚地展示了 Kendo 级联 ComboBox。

var categories = $("#categories").kendoComboBox({
    filter: "contains",
    placeholder: "Select category...",
    dataTextField: "CategoryName",
    dataValueField: "CategoryID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
        }
    }
}).data("kendoComboBox");

var products = $("#products").kendoComboBox({
    autoBind: false,
    cascadeFrom: "categories",
    filter: "contains",
    placeholder: "Select product...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
        }
    }
}).data("kendoComboBox");

var orders = $("#orders").kendoComboBox({
    autoBind: false,
    cascadeFrom: "products",
    filter: "contains",
    placeholder: "Select order...",
    dataTextField: "Order.ShipCity",
    dataValueField: "OrderID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
        }
    }
}).data("kendoComboBox");

更新：

将以下代码复制到https://dojo.telerik.com/ 运行演示。

来自多个父级的级联 Kendo ComboBox！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>

    supplier: <select id="suppliers"></select>
    product: <select id="products"></select>
    <script>
      $(function() {
        var productsDataSource = new kendo.data.DataSource({
          type: "odata",
          serverFiltering: true,
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
            },
            parameterMap: function(data) {
              return kendo.data.transports.odata.parameterMap.call(this, data);
            }
          }
        });

        $("#products").kendoMultiSelect({
          autoBind: false,
          dataTextField: "ProductName",
          dataValueField: "ProductID",
          dataSource: productsDataSource
        });

        $("#suppliers").kendoMultiSelect({
          autoBind: false,
          dataTextField: "CompanyName",
          dataValueField: "SupplierID",
          dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
              read: {
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Suppliers"
              }
            }
          },
          change: function() {
            var filters = buildFilters(this.dataItems());
            productsDataSource .filter(filters);
          }
        });

        function buildFilters(dataItems) {
          var filters = [],
              length = dataItems.length,
              idx = 0, dataItem;

          for (; idx < length; idx++) {
            dataItem = dataItems[idx];

            filters.push({
              field: "SupplierID",
              operator: "eq",
              value: parseInt(dataItem.SupplierID)
            });
          }

          return {
            logic: "or",
            filters: filters
          };
        }
      });
    </script>
</body>
</html>

【讨论】：

我惊慌失措地发布了这个问题，我想问的是，如何在组合框中进行多选，然后在选择多个值的情况下级联子组合框。所以我接受这个答案，因为就问题而言它是正确的并发布另一个详细的问题。
看看我更新的答案。我相信这就是你所追求的。