Blazorise项目实战：增强DataGrid菜单过滤功能的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00256/article/details/148577867

Blazorise项目实战：增强DataGrid菜单过滤功能的完整指南

Blazorise 项目地址: https://gitcode.com/gh_mirrors/bla/Blazorise

前言

在现代Web应用开发中，数据表格(DataGrid)是最常用的UI组件之一，而强大的过滤功能则是提升用户体验的关键。Blazorise作为一款优秀的Blazor UI组件库，在其1.3版本中引入了全新的菜单过滤模式(Filter Method)，为开发者提供了更灵活的列过滤能力。

本文将深入探讨如何基于Blazorise的DataGrid组件，扩展其内置过滤功能，实现更符合业务需求的上下文感知过滤系统。

基础概念解析

在开始之前，让我们先了解几个关键概念：

DataGrid过滤模式：Blazorise提供三种过滤模式
- 简单模式(Simple)
- 菜单模式(Menu)
- 自定义模式(Custom)
内置过滤方法：
- 包含(Contains)
- 开头匹配(StartsWith)
- 结尾匹配(EndsWith)
- 等于(Equals)
- 不等于(NotEquals)
过滤生命周期：
- 用户输入过滤条件
- 组件触发过滤事件
- 应用过滤逻辑
- 更新数据展示

现有过滤功能的局限性

虽然Blazorise的DataGrid已经提供了不错的过滤功能，但在实际业务场景中，我们经常会遇到以下需求：

数值类型列需要支持"大于"、"小于"等比较操作
日期类型列需要支持日期范围过滤
枚举类型列需要支持多选过滤
动态调整过滤条件而不立即触发过滤

这些需求超出了当前内置过滤功能的范围，因此我们需要进行功能扩展。

完整解决方案实现

第一步：定义扩展过滤枚举

我们首先创建一个扩展的过滤枚举类型，增加数值比较操作：

public enum EnhancedFilter
{
    Contains,       // 包含
    StartsWith,     // 开头匹配
    EndsWith,       // 结尾匹配
    Equals,         // 等于
    NotEquals,      // 不等于
    GreaterThan,    // 大于
    LessThan,       // 小于
    // 可根据需要继续扩展
    // GreaterThanOrEqual,
    // LessThanOrEqual,
    // Between,
    // In
}

第二步：创建过滤状态管理器

为了管理各列的过滤状态，我们需要一个管理器类：

public class FilterManager<TItem>
{
    private List<ColumnFilter<TItem>> _columnFilters = new();
    
    // 获取指定列的过滤条件
    public ColumnFilter<TItem> GetColumnFilter(string fieldName) 
        => _columnFilters.FirstOrDefault(x => x.Column.Field == fieldName);
    
    // 设置列的过滤方法
    public void SetColumnFilter(DataGridColumn<TItem> column, EnhancedFilter filter)
    {
        var columnFilter = GetColumnFilter(column.Field) ?? new ColumnFilter<TItem> { Column = column };
        columnFilter.SelectedFilter = filter;
        _columnFilters.AddOrUpdate(columnFilter);
    }
    
    // 其他辅助方法...
}

public class ColumnFilter<TItem>
{
    public DataGridColumn<TItem> Column { get; set; }
    public string SearchValue { get; set; }
    public EnhancedFilter SelectedFilter { get; set; } = EnhancedFilter.Contains;
}

第三步：自定义过滤菜单模板

利用Blazorise的模板功能，我们可以完全自定义过滤菜单：

<DataGrid TItem="Employee" @ref="_dataGrid"
          Filterable="true" 
          FilterMode="DataGridFilterMode.Menu"
          CustomFilter="CustomFilterLogic">
    
    <FilterMenuTemplate>
        <Row>
            <Column ColumnSize="ColumnSize.Is4">
                <Select TValue="EnhancedFilter"
                        SelectedValue="_filterManager.GetColumnFilter(context.Column.Field)?.SelectedFilter"
                        SelectedValueChanged="e => OnFilterMethodChanged(context.Column, e)">
                    <SelectItem Value="EnhancedFilter.Contains">包含</SelectItem>
                    <SelectItem Value="EnhancedFilter.Equals">等于</SelectItem>
                    <!-- 数值类型特有选项 -->
                    @if (context.Column.ColumnType == DataGridColumnType.Numeric)
                    {
                        <SelectItem Value="EnhancedFilter.GreaterThan">大于</SelectItem>
                        <SelectItem Value="EnhancedFilter.LessThan">小于</SelectItem>
                    }
                </Select>
            </Column>
            <Column ColumnSize="ColumnSize.Is4">
                <TextEdit @bind-Text="_filterManager.GetColumnFilter(context.Column.Field)?.SearchValue" />
            </Column>
            <Column ColumnSize="ColumnSize.Is4">
                <ButtonGroup>
                    <Button Color="Color.Primary" Clicked="context.Filter">应用</Button>
                    <Button Color="Color.Secondary" Clicked="() => ClearFilter(context.Column)">清除</Button>
                </ButtonGroup>
            </Column>
        </Row>
    </FilterMenuTemplate>
    
    <!-- 列定义 -->
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="ID" ColumnType="DataGridColumnType.Numeric" />
    <DataGridColumn Field="@nameof(Employee.Name)" Caption="姓名" />
    <DataGridColumn Field="@nameof(Employee.Salary)" Caption="薪资" ColumnType="DataGridColumnType.Numeric" />
</DataGrid>

第四步：实现自定义过滤逻辑

核心过滤逻辑的实现：

private bool CustomFilterLogic(Employee employee)
{
    if (_filterManager.ColumnFilters == null || !_filterManager.ColumnFilters.Any())
        return true;
    
    return _filterManager.ColumnFilters.All(filter => 
        EvaluateFilter(employee, filter));
}

private bool EvaluateFilter(Employee employee, ColumnFilter<Employee> filter)
{
    var propertyValue = GetPropertyValue(employee, filter.Column.Field);
    
    return filter.SelectedFilter switch
    {
        EnhancedFilter.Contains => propertyValue?.ToString()?.Contains(filter.SearchValue, StringComparison.OrdinalIgnoreCase) ?? false,
        EnhancedFilter.Equals => propertyValue?.Equals(filter.SearchValue) ?? false,
        EnhancedFilter.GreaterThan => CompareNumbers(propertyValue, filter.SearchValue) > 0,
        EnhancedFilter.LessThan => CompareNumbers(propertyValue, filter.SearchValue) < 0,
        _ => true
    };
}

private int CompareNumbers(object value1, string value2)
{
    if (value1 == null || string.IsNullOrWhiteSpace(value2))
        return 0;
    
    if (decimal.TryParse(value1.ToString(), out var num1) && 
        decimal.TryParse(value2, out var num2))
    {
        return num1.CompareTo(num2);
    }
    
    return 0;
}