如何在Blazorise DataGrid中配置基于现有值的自定义下拉过滤器？

要实现Caliber列的下拉框过滤器（选项来自数据中的现有口径值），可以通过自定义过滤器模板+手动过滤逻辑来完成，具体修改如下：

修改后的完整代码 #

@page "/Loadinglist"
@using myDB.Data

<DataGrid TItem="LoadData"
          Data="@filteredLoadList"
          @bind-SelectedRow="@selectedLoad"
          Editable="true"
          Resizable
          Responsive="true"
          Striped="true"
          ShowPager="true"
          ShowPageSizes="true"
          CommandMode="DataGridCommandMode.ButtonRow"
          EditMode="@editMode">
    <DataGridColumns>
        <DataGridColumn Field="@nameof(LoadData.id)" Caption="#" Sortable="true" />
        <DataGridColumn Field="@nameof(LoadData.caliber)" Caption="Caliber" Editable>
            <!-- 自定义下拉过滤器模板 -->
            <FilterTemplate>
                <Select TValue="string" 
                        @bind-SelectedValue="@selectedCaliberFilter" 
                        Placeholder="选择口径"
                        ValueChanged="@OnCaliberFilterChanged">
                    <SelectItem Value="">全部</SelectItem>
                    @foreach (var caliber in queryAllCalibers)
                    {
                        <SelectItem Value="@caliber">@caliber</SelectItem>
                    }
                </Select>
            </FilterTemplate>
        </DataGridColumn>
    </DataGridColumns>
</DataGrid>

@code {
    [Inject]
    public GetLoadData? getLoadData { get; set; }

    private IEnumerable<LoadData>? originalLoadList; // 存储原始数据
    private IEnumerable<LoadData>? filteredLoadList; // 存储过滤后的数据
    private IEnumerable<string> queryAllCalibers = Enumerable.Empty<string>();
    private LoadData? selectedLoad;
    private string? selectedCaliberFilter; // 下拉过滤器选中值
    private DataGridEditMode editMode = DataGridEditMode.Inline; // 补充定义编辑模式

    protected override async Task OnInitializedAsync()
    {
        originalLoadList = await getLoadData.GetDataAsync();
        GetCalibersFromContext();
        FilterLoadData(); // 初始化过滤数据
        await base.OnInitializedAsync();
    }

    // 提取数据中所有唯一的口径值
    protected void GetCalibersFromContext()
    {
        queryAllCalibers = originalLoadList?
            .Select(x => x.caliber)
            .Distinct()
            .OrderBy(x => x) ?? Enumerable.Empty<string>();
    }

    // 根据选中的口径过滤数据
    private void FilterLoadData()
    {
        if (originalLoadList == null)
        {
            filteredLoadList = null;
            return;
        }

        var query = originalLoadList.AsQueryable();

        // 应用口径过滤条件
        if (!string.IsNullOrEmpty(selectedCaliberFilter))
        {
            query = query.Where(x => x.caliber == selectedCaliberFilter);
        }

        filteredLoadList = query.ToList();
    }

    // 下拉选项变化时触发过滤
    private void OnCaliberFilterChanged()
    {
        FilterLoadData();
    }
}

关键修改说明 #

• 分离原始数据与过滤后数据：用originalLoadList存储完整的原始数据，filteredLoadList绑定到DataGrid，避免过滤时修改原始数据。
• 自定义过滤器模板：在Caliber列中添加<FilterTemplate>，用Blazorise的Select组件实现下拉选项，选项来自提取的唯一口径值，同时添加"全部"选项实现清空过滤。
• 手动过滤逻辑：通过FilterLoadData方法实现数据过滤，当下拉选项变化时（ValueChanged事件触发OnCaliberFilterChanged），重新执行过滤并更新filteredLoadList。
• 关闭默认过滤：移除了DataGrid的Filterable和FilterMethod属性，因为我们使用自定义过滤逻辑，避免默认过滤干扰。

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