You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor项目中RadzenGrid DateTime列仅按日期过滤的实现疑问

Blazor RadzenGrid 日期列过滤问题解答

问题1:FilterValue="@FilteredAuditDate"的作用及定义

  • 作用:FilterValue是RadzenGrid列的核心属性,用来绑定自定义过滤值,替代Grid默认生成的过滤参数。因为你需要只按日期过滤(忽略时间部分),通过这个属性可以指定我们自己控制的日期过滤值,让Grid用这个值去匹配AuditDate列的日期部分,而非默认的完整DateTime匹配逻辑。
  • 定义方式:在组件的@code块里声明一个可空DateTime类型的属性即可:
private DateTime? FilteredAuditDate { get; set; }

这个属性专门存储用户在日期选择器中选中的日期,作为Grid过滤的依据。

问题2:DateFilterChange方法的逻辑实现

这个方法的核心是处理用户选择的日期,确保只保留日期部分,并通知Grid重新应用过滤规则,具体逻辑如下:

  1. 接收用户从日期选择器选中的日期值;
  2. 提取日期的纯日期部分(去掉时分秒),赋值给FilteredAuditDate;
  3. 调用Grid的Reload()方法,触发过滤操作。

完整代码实现(需配合Grid的引用):

// 先给RadzenGrid添加@ref引用,比如<RadzenDataGrid @ref="grid" ...>
private RadzenDataGrid<View_CatAudit> grid;

private void DateFilterChange(DateTime? selectedDate)
{
    if (selectedDate.HasValue)
    {
        // 只保留日期部分,过滤时忽略时间
        FilteredAuditDate = selectedDate.Value.Date;
    }
    else
    {
        // 清空过滤条件
        FilteredAuditDate = null;
    }
    // 通知Grid重新加载并应用过滤
    grid.Reload();
}

完整修改后的组件代码

Razor视图部分

<RadzenDataGrid @ref="grid" AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Simple" 
                AllowSorting="true" PageSize="10" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" 
                ShowPagingSummary="true" Data="@catAuditList" TItem="View_CatAudit" 
                SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedRequest 
                ColumnWidth="300px" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
                LogicalFilterOperator="LogicalFilterOperator.And" AllowColumnPicking="true">
    <Columns>
        <RadzenDataGridColumn TItem="View_CatAudit" Property="RecordID" Title="" Width="50px" >
            <Template Context="data">
                <RadzenButton Icon="search" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Secondary" 
                              Click=@(() => GoToSelected(data.FK_CATRecordID)) />   
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="View_CatAudit" Property="AuditDate" Title="Date" Width="120px" 
                              FilterValue="@FilteredAuditDate">
            <!-- 自定义列模板,显示完整日期时间 -->
            <Template Context="data">
                @data.AuditDate.ToString("yyyy-MM-dd HH:mm:ss")
            </Template>
            <!-- 自定义过滤模板,仅显示日期选择器 -->
            <FilterTemplate>
                <RadzenDatePicker @bind-Value="@FilteredAuditDate" DateFormat="yyyy-MM-dd" 
                                  Change="@(args => DateFilterChange(args))" />
            </FilterTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

代码逻辑部分

@code {
    private List<View_CatAudit> catAuditList;
    private View_CatAudit selectedRequest;
    private RadzenDataGrid<View_CatAudit> grid;
    // 存储自定义过滤日期
    private DateTime? FilteredAuditDate { get; set; }

    protected override void OnInitialized()
    {
        // 获取数据
        catAuditList = oCATAuditRepository.GetAll();
    }

    private void GoToSelected(int recordId)
    {
        // 你的跳转逻辑实现
    }

    private void DateFilterChange(DateTime? selectedDate)
    {
        if (selectedDate.HasValue)
        {
            FilteredAuditDate = selectedDate.Value.Date;
        }
        else
        {
            FilteredAuditDate = null;
        }
        grid.Reload();
    }
}

内容的提问来源于stack exchange,提问作者ExecChef

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.14 10:43:17