如何使用jQuery编程过滤Kendo Grid 按年月筛选日期列忽略日期

1. 改造Grid中OrderDate列的筛选配置 #

给订单日期列新增自定义筛选UI配置，指定自定义的年月选择器初始化函数：

columns.Bound(p => p.OrderDate)
    .Format("{0:MM/yyyy}")
    .Width(140)
    // 新增以下筛选配置
    .Filterable(f => f
        .UI("yearMonthFilter")
        .Extra(false) // 关闭额外的筛选条件，只保留一个日期选择框
        .Operators(o => o.ForDate(d => d.Clear().IsEqualTo("等于"))) // 只保留等于的筛选运算符
    );

2. 实现年月筛选器的初始化JS函数 #

在页面中添加如下JS代码，自定义日期选择器只展示年月选项：

function yearMonthFilter(element) {
    element.kendoDatePicker({
        format: "MM/yyyy", // 显示格式和列保持一致
        depth: "year", // 控件默认展开到年视图，选择年后直接选月份
        start: "year",
        change: function() {
            // 选中后自动把日期设为当月第一天，避免日期干扰
            var value = this.value();
            if (value) {
                value.setDate(1);
                this.value(value);
            }
        }
    });
}

3. 适配筛选逻辑，按年月范围过滤数据 #

因为数据源存储的是完整的MM/dd/yyyy格式日期，需要把前端传入的"等于某年某月"的条件转换为当月的日期范围查询，有两种实现方案可选：

方案A：前端DataSource层面转换（推荐） #

在Grid的DataSource配置中新增ParameterMap，自动转换筛选条件：

.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("Orders_Read", "Grid"))
    // 新增参数转换配置
    .ParameterMap("parameterMapHandler")
)

对应的JS转换函数：

function parameterMapHandler(data, operation) {
    if (operation === "read" && data.filter) {
        // 遍历筛选条件，找到OrderDate的筛选
        for (var i = 0; i < data.filter.filters.length; i++) {
            var filter = data.filter.filters[i];
            if (filter.field === "OrderDate" && filter.operator === "eq") {
                var selectedDate = new Date(filter.value);
                // 构造当月第一天和下月第一天的范围条件
                var startOfMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
                var endOfMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 1);
                // 替换原有的等于条件为范围条件
                data.filter.filters.splice(i, 1,
                    { field: "OrderDate", operator: "gte", value: startOfMonth },
                    { field: "OrderDate", operator: "lt", value: endOfMonth }
                );
                // 筛选逻辑改为且
                data.filter.logic = "and";
                break;
            }
        }
    }
    return data;
}

方案B：后台读取接口处理 #

在Orders_Read接口中，接收到OrderDate的等于筛选条件时，同样转换为当月的日期范围查询即可，无需修改前端代码。

完成以上配置后，筛选控件就会只展示年月选择，筛选时自动匹配整个月的所有订单数据。

内容的提问来源于stack exchange，提问作者kuka muk