kendo ui 网格过滤器自动完成答案

【问题标题】：kendo ui grid filter autocompletekendo ui 网格过滤器自动完成
【发布时间】：2013-06-02 13:30:44
【问题描述】：

我有这个代码：

$("#grid_detail").kendoGrid({
    dataSource: {
        data: orders
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                contains: "Contains",
            }
        }
    },
    sortable: true,
    columns: [
        {
            field: "Buyer",
            title: "buyer",
            width: "40"
        },
        {
            field: "name",
            title: "Article name",
            width: "40"
        },
        {
            field: "paid",
            title: "Paid",
            width: "20",
            filterable: false
        }
    ]
});

现在，我如何过滤现场买家，但要使用自动完成功能，并显示 dataSource 中的所有买家？

我在买家申请时尝试过这个，但仍然没有。

filterable: function(element){
    element.kendoAutoComplete({
        dataSource: orders,
        dataTextField: "buyer",
    })
}

谢谢。

【问题讨论】：

您的案例与此剑道演示示例有何不同？demos.kendoui.com/web/grid/filter-menu-customization.html。他们正在使用“标题”过滤器，这是一个自动完成功能，唯一值得怀疑的细节是分页是否会影响自动完成列表中显示的项目范围，这是导致您出现问题的原因吗？

标签： filter kendo-ui datasource kendo-grid

【解决方案1】：

首先，在列中您说列名是Buyer，但在自动完成中您使用buyer。

也就是说，您应该做的是在filterable.ui 中生成自动完成。所以buyer 的列定义是：

{
    field     : "buyer",
    title     : "Buyer",
    width     : "40",
    filterable: {
        ui: function (element) {
            element.kendoAutoComplete({
                dataSource   : orders,
                dataTextField: "buyer"
            })
        }
    }
},

【讨论】：

谢谢，没看到ui。

【解决方案2】：

首先，我们使用filterable->extra=false 设置指定单个过滤条件，并将字符串列的过滤运算符限制为仅以等于和不等于开头。然后我们定义内置的日期选择器 UI 来过滤网格中的日期时间列，并分别为 Title 和 City 列实例化 Kendo UI AutoComplete 和 DropDownList。

为了创建下拉过滤器，我们将 javascript 函数分配给相应列的 filterable->ui 属性。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/filter-menu-customization">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
    

</head>
<body>
        <script src="../content/shared/js/people.js"></script>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            schema: {
                                model: {
                                    fields: {
                                        City: { type: "string" },
                                        Title: { type: "string" },
                                        BirthDate: { type: "date" }
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        height: 550,
                        scrollable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Starts with",
                                    eq: "Is equal to",
                                    neq: "Is not equal to"
                                }
                            }
                        },
                        pageable: true,
                        columns: [
                            {
                                title: "Name",
                                width: 160,
                                filterable: false,
                                template: "#=FirstName# #=LastName#"
                            },
                            {
                                field: "City",
                                width: 130,
                                filterable: {
                                    ui: cityFilter
                               }
                            },
                            {
                                field: "Title",
                                filterable: {
                                    ui: titleFilter
                                }
                            },
                            {
                                field: "BirthDate",
                                title: "Birth Date",
                                format: "{0:MM/dd/yyyy HH:mm tt}",
                                filterable: {
                                    ui: "datetimepicker"
                                }
                            }
                       ]
                    });
                });

                function titleFilter(element) {
                    element.kendoAutoComplete({
                        dataSource: titles
                    });
                }

                function cityFilter(element) {
                    element.kendoDropDownList({
                        dataSource: cities,
                        optionLabel: "--Select Value--"
                    });
                }

            </script>
        </div>


</body>
</html>

【讨论】：