将 Kendo Grid 列显示为日期时间，但在过滤时忽略时间

Question

我有一个 Kendo 网格和一列“销售时间”，显示为 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}" }
]

Answer 1

您可以定义一个

schema.parse

函数，该函数生成一个名为

SaleDate

的附加字段，该字段仅包含

Date

的

SaleTime

部分。

然后，当显示网格中的列时，您可以使用它。

类似：

// 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/

Answer 2

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

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

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

---

基本上，其想法是复制数据列，一个具有完整日期，另一个只有日期而没有时间。然后在列 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
}

Answer 3

我使用 SharePoint 2010 REST 服务作为数据源，这对我来说完成了工作：
（“魔法”发生在

parameterMap

部分）

$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'

（等于）以及值是否为日期。由于

typeof f.value

是一个对象并且

f.value instanceof Date

始终为 true，即使您说类似

f.value = new Date('foo')

之类的内容，检查值对象是否具有返回数字的函数

getMonth

似乎是合法的，以验证

f.value

是一个日期。

该函数随后将

'eq'

运算符更改为

'gt'

。 （请注意，

f.value

的时间是

00:00:00

！）。之后，它使用

'lt'

运算符创建一个新的过滤器，日期相同但时间不同（在我的例子中为

23:59:59

），并将其推送到过滤器数组。

由于 SharePoint 的“

$format

”属性存在一些问题，因此我们将其删除。

所以 '

date gt 19.10.2015 00:00:00 and date lt 19:10:2015 23:59:59

' 基本上与 '

date eq 19.10.2015

' 相同。