Blazorise多选项过滤DataGrid实现方案咨询

下面给你两种实用的实现方式，覆盖你尝试过的复选框列表和模态框场景：

一、内联复选框过滤（直接在列过滤模板实现） #

这种方式不需要额外模态框，直接在DataGrid列的过滤区域展示复选框选项，操作更直观。

步骤1：定义变量和数据源 #

@code {
    private DataGrid<YourDataModel> DataGridRef { get; set; }
    private List<string> _statusOptions = new() { "Active", "Inactive", "Pending" };
    private List<string> _selectedStatuses = new();
    private List<YourDataModel> _originalData = // 这里初始化你的原始数据源;
}

步骤2：配置DataGrid列的过滤模板 #

<DataGrid @ref="DataGridRef" Data="@_originalData" TItem="YourDataModel">
    <DataGridColumn Field="@nameof(YourDataModel.Status)" Caption="状态">
        <FilterTemplate>
            <Div Margin="Margin.Is2.FromBottom">
                <strong>筛选状态</strong>
            </Div>
            @foreach (var status in _statusOptions)
            {
                <Field Margin="Margin.Is1.FromBottom">
                    <FieldBody>
                        <Checkbox TValue="bool" 
                                  Checked="@_selectedStatuses.Contains(status)"
                                  CheckedChanged="@((val) => ToggleStatusFilter(status, val))">
                            @status
                        </Checkbox>
                    </FieldBody>
                </Field>
            }
            <Div Display="Display.Flex" Gap="Gap.Is2">
                <Button Color="Color.Primary" Size="Size.Small" Click="@ApplyStatusFilter">
                    应用筛选
                </Button>
                <Button Color="Color.Light" Size="Size.Small" Click="@ClearStatusFilter">
                    清除
                </Button>
            </Div>
        </FilterTemplate>
    </DataGridColumn>
    <!-- 其他列配置 -->
</DataGrid>

步骤3：实现过滤逻辑 #

private void ToggleStatusFilter(string status, bool isChecked)
{
    if (isChecked)
    {
        if (!_selectedStatuses.Contains(status))
            _selectedStatuses.Add(status);
    }
    else
    {
        _selectedStatuses.Remove(status);
    }
}

private void ApplyStatusFilter()
{
    if (_selectedStatuses.Count == 0)
    {
        DataGridRef.SetData(_originalData);
        return;
    }
    var filteredData = _originalData.Where(item => _selectedStatuses.Contains(item.Status)).ToList();
    DataGridRef.SetData(filteredData);
}

private void ClearStatusFilter()
{
    _selectedStatuses.Clear();
    DataGridRef.SetData(_originalData);
}

二、模态框式多选项过滤 #

如果需要更复杂的筛选条件集合，用模态框单独承载筛选面板更合适：

步骤1：添加模态框和触发按钮 #

<!-- 筛选触发按钮，可以放在DataGrid工具栏 -->
<DataGridToolbar>
    <Button Color="Color.Primary" Click="@(() => FilterModal.Show())">
        高级状态筛选
    </Button>
</DataGridToolbar>

<!-- 筛选模态框 -->
<Modal @ref="FilterModal">
    <ModalContent>
        <ModalHeader>
            <ModalTitle>选择状态</ModalTitle>
            <CloseButton Click="@(() => FilterModal.Hide())" />
        </ModalHeader>
        <ModalBody>
            @foreach (var status in _statusOptions)
            {
                <Field Margin="Margin.Is1.FromBottom">
                    <FieldBody>
                        <Checkbox TValue="bool" 
                                  Checked="@_selectedStatuses.Contains(status)"
                                  CheckedChanged="@((val) => ToggleStatusFilter(status, val))">
                            @status
                        </Checkbox>
                    </FieldBody>
                </Field>
            }
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Primary" Click="@(() => { ApplyStatusFilter(); FilterModal.Hide(); })">
                确认筛选
            </Button>
            <Button Color="Color.Light" Click="@(() => { ClearStatusFilter(); FilterModal.Hide(); })">
                重置
            </Button>
        </ModalFooter>
    </ModalContent>
</Modal>

步骤2：补充变量和逻辑 #

只需在@code里添加模态框引用，其余逻辑和第一种方式完全复用：

private Modal FilterModal { get; set; }

额外说明 #

• 如果你的DataGrid用的是服务器端分页/远程数据，不要在客户端过滤，而是把_selectedStatuses作为参数传递到后端，由后端执行数据库查询返回过滤后的结果。
• 可以通过Blazorise的FilteredChanged事件，结合DataGrid的内置过滤机制实现更灵活的全局过滤。

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