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

如何监听MudDataGrid过滤更新事件以自动执行代码?

解决MudDataGrid过滤条件更新时自动执行代码的问题

方案1:利用GridStateChanged事件监听过滤状态变化

MudDataGrid没有单独的过滤事件,但可以通过GridStateChanged事件捕获过滤操作——过滤会修改Grid的FilterState,该事件会在状态变化时触发,且可以通过ChangeTypes判断具体是哪种状态变化。

步骤1:修改DataGrid声明,绑定GridStateChanged事件

<MudDataGrid @ref="DataGrid" Items="Statistics.OrderByDescending(x => x.DeliveryDate)"
             GridStateChanged="HandleGridStateChanged">
    <Columns>
        <PropertyColumn Property="x => x.Source" Title="Source" Filterable="true" />
        <PropertyColumn Property="x => x.DeliveryDate" Title="Deliverydate" Filterable="true" />
        <PropertyColumn Property="x => x.Price" Title="Price" />
        <PropertyColumn Property="x => x.Attempts" Title="Attempts required" />
        <PropertyColumn Property="x => x.Inserted" Title="Inserted UTC" />
    </Columns>
</MudDataGrid>
<!-- 示例:用于显示过滤结果的文本 -->
<MudText>@FilterResultText</MudText>

步骤2:在代码后置中实现事件处理方法

// 声明用于显示结果的属性
private string FilterResultText { get; set; } = string.Empty;
private MudDataGrid<Statistic> DataGrid { get; set; } = default!;

private void HandleGridStateChanged(GridStateChangedEventArgs<Statistic> args)
{
    // 仅在过滤状态变化时执行逻辑
    if (args.ChangeTypes.HasFlag(GridStateChangeType.Filter))
    {
        // 处理过滤后的项,比如分组统计
        var visibleItems = DataGrid.FilteredItems.GroupBy(x => x.Source);
        // 更新显示文本
        FilterResultText = $"过滤后分组:{string.Join(", ", visibleItems.Select(g => $"{g.Key}: {g.Count()}条"))}";
        // 通知组件更新UI(如果需要)
        StateHasChanged();
    }
}

方案2:监听FilteredItems的变化(备选)

如果不需要区分具体的状态变化类型,也可以通过监听FilteredItems的集合更新来触发逻辑。可以在OnAfterRenderAsync中检查FilteredItems的变化,但这种方式不如GridStateChanged精准,因为分页、排序也会导致FilteredItems变化。

关键说明

  • GridStateChanged事件会在分页、排序、过滤、选择等多种状态变化时触发,通过GridStateChangeType枚举可以精准过滤出过滤操作的触发。
  • FilteredItems属性会实时反映当前过滤后的数据集,可直接在事件处理方法中使用。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.05 02:20:18