能否在MudBlazor动态生成列的DataGrid中实现筛选功能？

可以为动态生成的DataGrid列实现筛选功能，核心是为每个动态列手动指定筛选器模板并适配ExpandoObject的类型转换逻辑。以下是具体实现步骤和修改后的代码：

实现思路 #

MudBlazor的PropertyColumn默认无法自动识别ExpandoObject动态属性的类型，因此需要：

• 针对不同数据类型（字符串、日期等）绑定对应的筛选组件
• 在筛选逻辑中动态转换属性值类型，完成匹配判断

修改后的完整代码 #

@page "/dynamic-datagrid"
@using MudBlazor
@using System.Dynamic

<MudDataGrid Items="@dynamicObjects" AutoGenerateColumns="false" Dense="true" Bordered="true" 
             SortMode="SortMode.Multiple" Filterable="true">
    <Columns>
        @foreach (var header in headers)
        {
            <PropertyColumn Title="@header" Property="@(x => ((IDictionary<string, object>)x)[header])">
                <FilterTemplate>
                    @{
                        var columnFilter = context.Filter;
                        // 根据列名匹配数据类型，渲染对应筛选组件
                        if (header == "Name")
                        {
                            <MudTextField @bind-Value="@((string)columnFilter.Value)" 
                                          Placeholder="搜索姓名" Clearable="true" />
                        }
                        else if (header == "Birthday")
                        {
                            <MudDatePicker @bind-Value="@((DateTime?)columnFilter.Value)" 
                                           Clearable="true" />
                        }
                    }
                </FilterTemplate>
                <FilterLogic>
                    @{
                        var filterValue = context.Filter.Value;
                        var item = context.Item;
                        var propertyValue = ((IDictionary<string, object>)item)[header];
                        
                        // 空值直接通过筛选
                        if (filterValue == null)
                        {
                            context.Accepted = true;
                            return;
                        }
                        
                        // 针对不同列类型实现筛选判断
                        switch (header)
                        {
                            case "Name":
                                context.Accepted = ((string)propertyValue).Contains((string)filterValue, StringComparison.OrdinalIgnoreCase);
                                break;
                            case "Birthday":
                                context.Accepted = ((DateTime)propertyValue).Date == ((DateTime?)filterValue)?.Date;
                                break;
                        }
                    }
                </FilterLogic>
            </PropertyColumn>
        }
    </Columns>
</MudDataGrid>

@code {
    private List<ExpandoObject> dynamicObjects = new();
    private List<string> headers = new();

    protected override void OnInitialized()
    {
        headers = new List<string> { "Name", "Birthday" };

        dynamic obj1 = new ExpandoObject();
        obj1.Name = "Albert";
        obj1.Birthday = new DateTime(1879, 3, 14);

        dynamic obj2 = new ExpandoObject();
        obj2.Name = "Isaac";
        obj2.Birthday = new DateTime(1643, 1, 4);

        dynamicObjects.Add(obj1);
        dynamicObjects.Add(obj2);
    }
}

关键说明 #

• FilterTemplate：为每个动态列渲染对应的筛选输入组件（文本框、日期选择器等），将组件值绑定到context.Filter.Value
• FilterLogic：自定义筛选判断逻辑，把ExpandoObject的属性值转换为对应类型后，与筛选值进行匹配
• 可扩展性：如果需要支持数字、布尔等更多数据类型，只需在模板和逻辑中添加对应的判断分支即可

内容的提问来源于stack exchange，提问作者Utkarsh Shinde