首页 > 解决方案 > 多列上的 Blazor 过滤引导表

问题描述

我有一个 Blazor 应用程序并在我的引导表上实现了一个过滤器功能,类似于以下链接:https ://timheuer.com/blog/filtering-data-table-with-blazor/

这工作正常,并且链接如何解释它。但是,我想在代码中添加一个额外的步骤,允许我在过滤器中输入多个内容并过滤所有这些项目。例如:Warm 22,它在汇总列和 Temp(F) 上进行过滤。因此,如果您在此过滤器中输入多个字符串,它会查看每个字符串并在任何列中找到与该字符串相关的任何内容?

    <div class="form-group">
    <input class="form-control" type="text" placeholder="Filter..."
           @bind="Filter"
           @bind:event="oninput">
</div>
<table class="table table-striped">
...
</table>


    public bool IsVisible(WeatherForecast forecast)
    {
        if (string.IsNullOrEmpty(Filter))
            return true;
     
        if (forecast.Summary.Contains(Filter, StringComparison.OrdinalIgnoreCase))
            return true;
     
        if (forecast.TemperatureC.ToString().StartsWith(Filter) || forecast.TemperatureF.ToString().StartsWith(Filter))
            return true;
     
        return false;
    }




<table class="table table-striped">
    <thead class="thead-light">
        <tr>
            <th scope="col">Date</th>
            <th scope="col">Temp. (C)</th>
            <th scope="col">Temp. (F)</th>
            <th scope="col">Summary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var forecast in forecasts)
        {
            if (!IsVisible(forecast))
                continue;
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
        }
    </tbody>
</table>

目前我的 IsVisible() 方法查看特定列而不是检查所有列。我试图将输入的文本放在一个数组中并循环遍历它,但无法让它工作并且不认为它是最好的方法。

标签: c#blazor

解决方案


推荐阅读