在我们的应用程序中，我们希望日期列上的过滤器提示用户输入开始日期和结束日期，过滤器返回相关字段位于这两个日期之间(或相同日期)的行。

初始方法

我们最初的方法是限制日期类型使用 gte 和 lte 运算符，并在列上添加“extra : true”可过滤选项。这很接近，但出现了以下问题:A)每个日期输入都可以使用 gte(开始)或 lte(结束)运算符，提供不希望的灵 active 和用户创建永远不会返回结果的过滤器的选项，以及B) 提出了我们不想要的逻辑比较(和/或)。

更好的方法

This question Matthew Erwin 的回答让我们非常接近:它允许我们完全重新设置过滤器的样式，因此我们可以简单地显示开始日期输入和结束日期输入。但是，我无法工作的是将正确的过滤操作与正确的输入相关联(开始日期为 gte，结束日期为 lte)。我的自定义过滤器如下:

    $scope.dateFilter = {
    extra: true,
    operators: {},
    ui: function (element) {
        var parent = element.parent();
        while (parent.children().length > 1)
            $(parent.children()[0]).remove();

        parent.prepend(
            "Start Date:<br/><span class=\"k-widget k-datepicker k-header\">" +
            "<span class=\"k-picker-wrap k-state-default\">" +
            "<input data-bind=\"value: filters[0].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" +
            " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-disabled=\"false\" " +
            " aria-readonly=\"false\" aria-label=\"Choose a date\">" +
            "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" +
            "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" +

            "<br/>End Date:<br/>" +
            "<span class=\"k-widget k-datepicker k-header\"><span class=\"k-picker-wrap k-state-default\">" +
            "<input data-bind=\"value: filters[1].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" +
            " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" " +
            " aria-disabled=\"false\" aria-readonly=\"false\" aria-label=\"Choose a date\">" +
            "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" +
            "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>"
        );
    }
};

使用这种方法，会为每个日期生成 Odata 过滤器选项，但它使用 eq Equal To 运算符，因此不会返回任何值。我们不会专门针对数据源构建过滤器。

有没有一种简单的方法可以将每个日期输入与特定的过滤器运算符相关联？有没有更好的方法来处理这个问题？似乎通常需要基于开始 - 结束范围过滤日期。

其他细节

我们正在使用 AngularJS 和 WebAPI 以及 Odata。

最佳答案

在与 Telerik 合作后，我找到了答案。我打开的线程可以是found here ，但我也会在这个答案中进行总结。

最终的解决方案是:

• 使用列“可过滤”选项的“消息”选项自定义过滤器显示消息。
• 使用列“可过滤”选项的“额外”选项在过滤器菜单中获取额外的日期选择器。
• 在网格可过滤选项中配置“运算符”选项，以设置可用于日期(gte、lte)的运算符以及为每个运算符(开始日期、结束日期)显示的文本。
• 使用 filterMenuInit 事件配置过滤器控件。

最终结果

列可过滤

使用了以下可过滤选项:

filterable: { "extra": "true", "messages": { "info": "Show items between dates:" }}

Extra 为我们提供了第二个日期选择器，“信息”消息自定义了显示在过滤器菜单顶部的文本。

网格可过滤

我使用网格级“可筛选”选项中的“运算符”选项来使日期过滤器仅提供 gte 和 lte 运算符，并为这些运算符自定义文本。这就是运营商配置对象最终的样子:

"date": {
                "gte": "Begin Date",
                "lte": "End Date"
            }

因为我们希望它适用于所有日期，所以我们将其放入工厂并在每个 Angular Controller / View 中重用它。

filterMenuInit 事件

通过为 filterMenuInit 事件提供处理程序，您可以在创建过滤器菜单时访问和配置各个控件。我创建的处理函数如下所示:

function (e) {
            if (e.sender.dataSource.options.schema.model.fields[e.field].type == "date") {
                var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
                beginOperator.value("gte");
                beginOperator.trigger("change");
                beginOperator.readonly();

                var logicOperator = e.container.find("[data-role=dropdownlist]:eq(1)").data("kendoDropDownList");
                logicOperator.readonly();

                var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
                endOperator.value("lte");
                endOperator.trigger("change");
                beginOperator.readonly();
            }

具体来说，对于任何日期字段，此函数分别将第一个和最后一个下拉运算符设置为“gte”和“lte”(这是第一个日期运算符和第二个日期运算符的下拉列表)，并设置所有下拉列表为只读，因此用户无法更改它们(索引 1 处唯一的其他下拉列表是逻辑比较 - 仅 And 有意义，因此我们不允许用户更改它。)

此函数将此配置应用于任何“日期”类型的字段。我这样做是为了我可以一次创建这个函数，把它放在 Angular 工厂中，然后在我需要的任何网格中重用它。如果您不想将此作为所有日期列的一揽子配置应用，您可以更改条件以按名称检查字段。示例:

if (e.field == "fieldName")

希望这对其他人有帮助。这不会让您在过滤器菜单中最终自定义 UI，但它确实让您可以简单地在两个日期之间设置一个过滤器。我敢肯定，聪明的人可以将其与我原来的策略(完全替换过滤器菜单的标记)合并，以提出完全自定义的内容。

关于javascript - 如何在两个日期之间定义剑道网格列过滤器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25060935/