为什么tbody中的元素没有移动到表上方

Question

我在这篇文章中为默认的Blazor天气示例添加了一个过滤器组件。它工作正常，但搜索输入显示在表的第一行。

<tbody>
<FilterableTable Items=@forecasts GetFilterableText=@(item => item.Summary)>
<tr>
<td>@context.Date.ToShortDateString()</td>
<td>@context.TemperatureC</td>
<td>@context.TemperatureF</td>
<td>@context.Summary</td>
</tr>
</FilterableTable>
</tbody>

请参阅此小提琴以获取完整代码。

然而，当我将生成的HTML放入JS中时，输入显示在表上方。

<tbody>
<input class="filterbox" placeholder="filter">
<tr>
<td>06/05/2018</td>
<td>1</td>
<td>33</td>
<td>Freezing</td>
</tr>
</tbody>

请参阅此小提琴以获取完整代码。

我是不是错过了什么？有没有一些引导JS魔法可以移动Blazor服务器中缺少的输入？我怎么能像在JSFiddle中那样将搜索框移动到表格上方？

Answer 1

问题是FilterableTable组件包含输入元素，而它，FilterableTable组件，正在tbody html元素中呈现。您应该遵循设计标准如何创建模板化组件。下面是一个如何解决问题的工作示例。请注意，我写这段代码的速度非常快，可能需要进行一些改进。

索引.razor

@page "/"
@inject HttpClient Http
@inject NavigationManager NavigationManager
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<a class="btn" href="/create">
<i class="oi oi-plus"></i>
Add new item
</a>
<FilterableTable Items=@forecasts GetFilterableText=@(item => item.Summary)>
<TableHeader>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Summary</th>
</tr>
</TableHeader>

<RowTemplate>
<td>@context.Date.ToShortDateString()</td>
<td>@context.TemperatureC</td>
<td>@context.Summary</td>
</RowTemplate>

</FilterableTable>
}
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>(NavigationManager.ToAbsoluteUri("/sample-data/weather.json").ToString());
}
class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF { get; set; }
public string Summary { get; set; }
}
}

可过滤表格.razor

@typeparam TItem
<p><input class="filterbox" @bind=Filter @bind:event="oninput" placeholder="filter" /></p>
<br />
<table class="table">
<thead>
@TableHeader
</thead>

<tbody>
@foreach (TItem item in GetFilteredItems())
{
<tr>
@RowTemplate(item)

</tr>
}
</tbody>
</table>  
@code {
[Parameter]
public RenderFragment TableHeader { get; set; }
[Parameter] public IEnumerable<TItem> Items { get; set; }
[Parameter] public Func<TItem, string> GetFilterableText { get; set; }
[Parameter] public RenderFragment<TItem> RowTemplate { get; set; }
private string Filter;
private static readonly Func<TItem, string> DefaultGetFilterableText = item => (item?.ToString() ?? string.Empty);
private IEnumerable<TItem> GetFilteredItems()
{
Func<TItem, string> filterFunc = GetFilterableText ?? DefaultGetFilterableText;
IEnumerable<TItem> result = (Items ?? Array.Empty<TItem>());
if (!string.IsNullOrEmpty(Filter))
{
result = result.Where(x => (GetFilterableText(x) ?? string.Empty).Contains(Filter,
StringComparison.InvariantCultureIgnoreCase));
}
return result;
}
}