Blazor网格绑定列(按字段名称) [英] Blazor Grid Bound Column by Field Name
本文介绍了Blazor网格绑定列(按字段名称)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在研究一些付费网格组件,它们具有非常酷的绑定列"技术:
I'm studying some paid grid components and they have a pretty cool "Bound Column" technique:
<TelerikGrid Data=@GridData>
<GridColumns>
<GridColumn Field="TemperatureC" Title="Temp. C" />
<GridColumn Field="Summary" />
</GridColumns>
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Forecast</GridCommandButton>
</GridToolBar>
</TelerikGrid>
<DxDataGrid Data="@DataSource">
<DxDataGridColumn Field="@nameof(ProductFlat.Id)">
</DxDataGridColumn>
<DxDataGridColumn Field="@nameof(ProductFlat.Category)">
</DxDataGridColumn>
</DxDataGrid>
我该如何实现?我想创建一个非常基本的表:
how can I achieve this? I want to create a very basic table:
<MyGrid DataSource=@MySource>
<MyColumn Field="Id" Name="My Id" />
</MyGrid>
渲染:
<table class="table">
<thead>
<tr>
<th scope="col">My Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1</td>
</tr>
<tr>
<td>#2</td>
</tr>
</tbody>
</table>
推荐答案
这不是一个简单的解决方案,您应该了解Blazor如何使用组件.基本上,方法是在外部MyGrid
组件上注册子级MyColumn
模板",然后通过一点反射来动态渲染网格.在下面,我发布准备复制,测试和学习的食谱.
It's not a trivial solution, you should to understand how Blazor works with components. Basically, the way, is to register children MyColumn
"templates" on outer MyGrid
component, then, render grid dynamically with a bit of reflection. Below I post the recipe ready for copy-paste, test and learn.
dotnet new blazorserver
步骤1:创建Pages/MyColumn.razor
组件:
Step 1: Create Pages/MyColumn.razor
component:
@code {
[Parameter]
public string Field { get; set; }
[CascadingParameter]
private MyGrid Parent { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
Parent.AddColumn(this); //register child into parent
}
}
步骤2:创建Pages/MyGrid.razor
组件:
Step 2: Create Pages/MyGrid.razor
component:
<CascadingValue Value="this">
<table class="table">
<tbody>
@ChildContent
@foreach (var item in DataSource)
{
@RowItem(item)
}
</tbody>
</table>
</CascadingValue>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public IEnumerable<object> DataSource { get; set; }
List<MyColumn> Columns = new List<MyColumn>();
public void AddColumn(MyColumn column)
{
Columns.Add(column);
StateHasChanged();
}
// Here the function to create each row dynamically:
private RenderFragment RowItem(object row)
{
int i = 0;
return b => // create dynamically
{
b.OpenElement(++i, "tr");
foreach(var column in Columns)
{
b.OpenElement(++i, "td");
var val = row.GetType().GetProperty(column.Field)
.GetValue(row, null).ToString();
b.AddContent(++i,val);
b.CloseElement();
}
b.CloseElement();
};
}
}
步骤3:在Pages/FetchData.razor
上使用网格
Step 3: Use your grid on Pages/FetchData.razor
@page "/fetchdata"
@using s.Data
@inject WeatherForecastService ForecastService
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from a service.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<MyGrid DataSource=@forecasts>
<MyColumn Field="Date"/>
<MyColumn Field="Summary"/>
</MyGrid>
}
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
结果:
这篇关于Blazor网格绑定列(按字段名称)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文