Kendo jQuery网格，获取下拉过滤器上的文本

Kendo UI 是一个基于 jQuery 的 UI 组件库，提供了丰富的 UI 控件，其中包括 Kendo jQuery 网格（Grid）。在 Kendo jQuery 网格中，下拉过滤器（Dropdown Filter）是一个常用的功能，允许用户通过下拉菜单来过滤网格中的数据。

基础概念

Kendo jQuery 网格（Grid）：一个高度可定制的数据表格控件，支持分页、排序、过滤、编辑等功能。

下拉过滤器（Dropdown Filter）：一种过滤器类型，允许用户从一个下拉列表中选择一个值来过滤网格数据。

类型

单选下拉过滤器：用户只能选择一个值。
多选下拉过滤器：用户可以选择多个值。

应用场景

数据筛选：在需要快速筛选大量数据的场景中非常有用。
表单集成：可以与表单结合使用，提供更丰富的用户交互体验。

获取下拉过滤器上的文本

假设你已经有一个 Kendo jQuery 网格，并且其中包含一个下拉过滤器。以下是如何获取下拉过滤器上当前选中项的文本的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Kendo Grid Dropdown Filter Example</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
    <button id="getFilterText">Get Filter Text</button>

    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20
                },
                height: 550,
                sortable: true,
                pageable: true,
                filterable: {
                    extra: false,
                    operators: {
                        string: {
                            contains: "Contains",
                            eq: "Is equal to",
                            neq: "Is not equal to",
                            startswith: "Starts with",
                            endswith: "Ends with"
                        },
                        number: {
                            eq: "Is equal to",
                            neq: "Is not equal to",
                            gte: "Is greater than or equal to",
                            gt: "Is greater than",
                            lte: "Is less than or equal to",
                            lt: "Is less than"
                        },
                        date: {
                            eq: "Is equal to",
                            neq: "Is not equal to",
                            gte: "Is after or equal to",
                            gt: "Is after",
                            lte: "Is before or equal to",
                            lt: "Is before"
                        }
                    }
                },
                columns: [
                    { field: "OrderID", title: "Order ID", width: 120 },
                    { field: "Freight", width: 120, filterable: { ui: "numericFilter" } },
                    { field: "OrderDate", title: "Order Date", width: 140, format: "{0:MM/dd/yyyy}", filterable: { ui: "dateFilter" } },
                    { field: "ShipName", title: "Ship Name", width: 260, filterable: { ui: "stringFilter" } },
                    { field: "ShipCity", title: "Ship City", width: 150, filterable: { ui: "dropdownFilter" } }
                ]
            });

            $("#getFilterText").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var filter = grid.dataSource.filter();
                if (filter && filter.filters) {
                    filter.filters.forEach(function (f) {
                        if (f.field === "ShipCity") {
                            var dropdownFilter = grid.columns.find(col => col.field === "ShipCity").filterable.ui;
                            if (dropdownFilter && dropdownFilter.value()) {
                                alert("Selected Filter Text: " + dropdownFilter.value());
                            }
                        }
                    });
                }
            });
        });

        function stringFilter(e) {
            e.kendoDropDownList({
                dataSource: ["Berlin", "Hamburg", "London", "Madrid", "Paris", "Rome", "Seville", "Stockholm", "Vienna"],
                optionLabel: "Select city..."
            });
        }

        function numericFilter(e) {
            e.kendoNumericTextBox({
                spinners: false,
                min: 0,
                max: 1000
            });
        }

        function dateFilter(e) {
            e.kendoDatePicker({
                format: "MM/dd/yyyy"
            });
        }

        function dropdownFilter(e) {
            e.kendoDropDownList({
                dataSource: ["Berlin", "Hamburg", "London", "Madrid", "Paris", "Rome", "Seville", "Stockholm", "Vienna"],
                optionLabel: "Select city..."
            });
        }
    </script>
</body>
</html>