如何确定两个日期之间的剑道网格列过滤器？ [英] How to define a Kendo grid Column filter between two dates?

问题描述

在我们的应用中，我们希望在一个日期列的筛选提示输入开始日期和结束日期的用户，与该过滤器返回的行，其中所涉及的领域落在这两个日期之间（或上）。

In our application we want the filter on a date column to prompt the user for a start date and an end date, with the filter returning rows where the field in question falls between (or on) those two dates.

初步探讨

我们的初步做法是限制日期类型使用GTE和LTE运营商，并增加了额外的：真正的关于列过滤选项。这差一点，但presented以下问题：a）每个日期输入可以使用任一GTE（开始）或LTE（完）运营商，提供了不需要的灵活性，并为用户选择创建一个过滤器，将不会返回结果，和B）presented一个逻辑比较（和/或），我们不想要的。

Our initial approach was to restrict date types to use gte and lte operators, and add the "extra : true" filterable option on the column. This came close, but presented the following problems: A) Each date input could use either the gte (Start) or lte (End) operator, providing undesired flexibility and the option for the user to create a filter that would never return results, and B) Presented a logical comparison (And / Or) that we don't want.

更好的办法

这个问题有由马修·欧文的回答可以让我们非常接近：它可以让​​我们完全重新式过滤器完全，所以我们可以present只是一个开始日期输入和结束日期输入。然而，我不能让工作与右输入正确的过滤操作（GTE的开始日期，LTE的结束日期）相关联。我的自定义过滤器是如下：

This question has an answer by Matthew Erwin that gets us very close: it allows us to completely re-style the filter entirely, so we can present simply a Start Date input and an End date input. However, what I can't get working is associating the right filter operation with the right input (gte for the Start date, lte for the End date). My custom filter is as follows:

    $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过滤选项，但是它使用的当量等于操作员，因此没有值被不断返回。我们不是在数据源上建立专门的过滤器

With this approach, the Odata filter option is generated for each of the dates, however it uses the eq Equal To operator, so no values are ever returned. We aren't building filters specifically on the data source.

有一个简单的方法可以让我每那些日期输入与特定的过滤运算符相关联？有没有更好的方式来处理这个问题？这似乎是基于一个开始过滤日期 - 将通常所需的最终范围。

Is there a simple way I can associate each of those date inputs with a specific filter operator? Is there a better way to approach this subject? It seems like filtering dates based on a Start - End range would be commonly desired.

其他信息

我们正在使用AngularJS，并用的WebAPI的OData。

We are using AngularJS, and WebAPI with Odata.

推荐答案

与Telerik的工作后，我来到了一个答案。我开的线程可以是<一个href=\"http://www.telerik.com/forums/how-to-define-a-kendo-grid-column-filter-between-two-dates#rNdcWqRXk0ORqGT-661OIA\">found这里，但我也会总结这个答案。

After working with Telerik, I came to an answer. The thread that I opened can be found here, but I'll also summarize in this answer.

最终的解决方案是：

• 使用列的消息选项过滤选项自定义过滤器显示的消息。


• 使用列的额外选项过滤选项，以获取在滤镜菜单额外的日期选择器。


• 配置网格中的过滤选项可以设置哪些运营商可以使用日期（GTE，LTE），并显示每个（开始日期，结束日期）的文本内容的运营商选项。


• 使用filterMenuInit事件配置过滤器控制。

最终结果

列可筛选

以下过滤选项分别采用：

The following filterable options were used:

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

额外给了我们第二个日期选择器，和信息的消息在定制过滤器菜单顶部显示的文本。

Extra gives us the second date selector, and the "info" message customizes the text displayed at the top of the filter menu.

电网可筛选

我用在电网级过滤选项中的运营商选项，以使最新的过滤器只提供GTE和LTE运营商，以及定制的操作员的文本。这是运营商配置对象伤口什么看起来像：

I used the "operators" option in the grid-level "filterable" option to make date filters only provide the gte and lte operators, and to customize the text for those operators. This is what the operators configuration object wound up looking like:

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

由于我们希望这适用于所有日期，我们把在工厂和重用它在每个角控制器/视图。

Because we want this to apply for all dates, we put that in a factory and reuse it in each angular controller / view.

filterMenuInit事件

通过提供的filterMenuInit事件的处理程序，您可以访问，并因为它是建立在滤镜菜单中配置单独的控件。我创建的处理函数如下：

By providing a handler for the filterMenuInit event, you can access and configure the individual controls in the filter menu as it is created. The handler function that I created looks like this:

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，是合乎逻辑的比较 - 仅是有道理的，所以我们不会让用户更改它）

Specifically, for any date field, this function sets the first and last dropdown operators to "gte" and "lte" respectfully (Those are the dropdowns for the first date operator and the second date operator), and sets all of the dropdowns to read-only so the user can't change them (the only other dropdown, which is at index 1, is the logical comparison - only And makes sense, so we don't let users change it.)

这功能也适用于那些有日期类型的任何字段此配置。我就是这么做的，这样我可以一次创建这个功能，将其放在角工厂，然后再用它，我需要的网格。如果你不希望将此作为在所有日期列的毯子配置，你可以改变条件来检查通过名称字段。例如：

This function applies this configuration for any fields that are of "date" type. I did it this way so that I could create this function once, put it in an Angular factory, and then reuse it for any grid that I needed. If you don't want to apply this as a blanket configuration across all of your date columns, you can change the conditional to check for fields by name. Example:

if (e.field == "fieldName")

希望这会有所帮助别人。这不会给你在滤镜菜单的UI定制的极致，但它确实让你简单地设置了两个日期之间的过滤器。我敢肯定，聪明的人可以与我原来的策略（更换标记为完全过滤菜单）要拿出一些完全定制合并这一点。

Hopefully this will be helpful to someone else. This doesn't give you ultimate customization of the UI in the filter menu, but it does let you simply set up a filter between two dates. I'm sure someone clever could merge this with my original strategy (replacing the markup for the filter menu entirely) to come up with something completely customized.

这篇关于如何确定两个日期之间的剑道网格列过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！