将“剑道网格”列显示为“日期时间”,但在筛选时忽略“时间”

Display Kendo Grid column as DateTime but ignore Time when filtering

本文关键字:时间 日期时间 筛选 网格 剑道网格 显示 日期      更新时间:2023-09-26

我有一个剑道网格和一个列"销售时间"显示为MM/dd/yyyy HH:mm a (1/3/2015 2:34 PM)。

现在我希望能够仅按日期过滤,忽略时间。但默认情况下,筛选器正在查看时间,因此我使用"等于"筛选的任何日期都不会返回任何结果。

这是我为说明这个问题而制作的JSFiddle:http://jsfiddle.net/dmathisen/yx7huvxp/

还有一些代码,所以我可以发布 jsfiddle 链接:)

columns: [
    { field: "ModelName", title: "Model" },
    { field: "DefaultMonoCPP", title: "Mono Cost" },
    { field: "SaleTime", title: "Sale Time", format: "{0:g}" }
]

您可以定义一个schema.parse函数,该函数生成一个名为 SaleDate 的附加字段,该字段仅包含SaleTimeDate部分。

然后,在网格中显示列时,您可以使用它。

像这样:

// Schema definition
schema: {
    model: {
        id: "ModelID",
        fields: {
            ModelName: { type: "string" },
            DefaultMonoCPP: { type: "number" },
            SaleTime: { type: "date" },
            SaleDate: { type: "date" }  // Additional field with the `Date` of `SaleTime`
        }
    },
    parse: function(d) {
        $.each(d, function(idx, elem) {
            // Compute SaleDate from SaleTime
            elem.SaleDate = kendo.parseDate(elem.SaleTime, "MM/dd/yyyy");
        });
        return d;
    }        
}
// Columns definition
columns: [
    {
        field: "ModelName",
        title: "Model"
    },
    {
        field: "DefaultMonoCPP",
        title: "Mono Cost"
    },
    {
        field: "SaleDate",
        title: "Sale Time",
        template: "#= kendo.toString(SaleTime, 'g') #"
    }
],

您的 JSFiddle 在此处修改:http://jsfiddle.net/OnaBai/yx7huvxp/10/

Telerik 不支持开箱即用。看到这里和这里,这家伙使用逻辑日期时间过滤器转换做了一个出色的服务器端解决方案。但是,就我个人而言,我总是觉得去服务器端处理客户端事务很奇怪。

所以最后我通常只是将日期和时间部分分成两个不同的列,或者在不提供过滤器选项的情况下使用日期时间,或者在设计中尽可能避免日期时间字段。

我还有一个有效的数据源黑客,但是...我不建议使用它。如果你有兴趣,这里是...


基本上这个想法是复制数据列,一个是完整日期,另一个只有日期而没有时间。然后在列 UI 上,您希望显示完整日期,但对于基础数据源,您希望使用假日期。用户始终看到完整日期,但筛选器将使用永恒日期。

这是一个演示

RandDate是我的完整约会。 RandDate2是我没有时间的假部分约会。

RandDate: Mon Apr 07 2014 06:15:00 GMT-0400 (Eastern Daylight Time)
RandDate2: Mon Apr 07 2014 00:00:00 GMT-0400 (Eastern Daylight Time)

在我的列定义中,我使用部分日期作为字段,但使用模板显示完整日期

{
    field: "RandDate2", //Set column source to the fake one without time
    title: "Random Date",
    template: "#= kendo.toString(RandDate,'g') #", //display the full date and time
}

我正在使用SharePoint 2010 REST服务作为数据源,这为我完成了工作:("魔术"发生在参数映射部分)

$scope.mainGridOptions = {
...
dataSource: new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: {
                    url: $scope.filterParams.url,
                    dataType: "json"
                },
                parameterMap: function (options, type) {
                    if (options && options.filter && options.filter.filters && options.filter.filters.count != 0) {
                        options.filter.filters.forEach(function (f) {
                            if (f.operator && f.operator == 'eq' && f.value && typeof f.value.getMonth == 'function' && typeof f.value.getMonth() == 'number') {
                                f.operator = 'gt';
                                var newFilter = {
                                    field: f.field,
                                    operator: 'lt',
                                    value:  new Date(f.value.getFullYear(), f.value.getMonth(), f.value.getDate(), 23, 59, 59)
                                };
                                options.filter.filters.push(newFilter);
                            }
                        })
                    }
                    var params = kendo.data.transports.odata.parameterMap(options, type);
                    delete params.$format;
                    return params;
                }
            },
            ...
}

它的基本作用:如果应用了某些过滤器,请检查运算符是否为"eq"(等于)以及值是否为日期。由于 F.值的类型是一个对象,并且 Date 的 f.value 实例始终为真,即使您说 f.value = new Date('foo')),检查值对象是否具有返回数字的函数"getMonth"似乎是合法的验证 f.value 是一个日期。然后,该函数将"EQ"运算符更改为"GT"。(请注意,F.Value 的时间是 00:00:00!)。之后,它创建一个带有"lt"运算符的新过滤器,日期相同,但另一个时间(在我的例子中为 23:59:59)并将其推送到 filters 数组。由于 SharePoint 对该"$format"属性存在一些问题,因此我们将其删除。

所以"日期GT 19.10.2015 00:00:00和日期LT 19:10:2015

23:59:59"与"日期均衡器19.10.2015"基本相同