我尝试实现un grid组件,但是遇到了blazor组件的逻辑问题。
我实际上是这样管理我的网格的
<MyGrid>
<GridHeader>
<th scope="col">Nom</th>
<th scope="col">Statut</th>
</GridHeader>
<GridBody Context="child">
<td>@child.NomPrenom</td>
<td>@child.LibStatut</td>
</GridBody>
</MyGrid>
and on the Mygrid component like this
[Parameter]
public RenderFragment GridHeader { get; set; }
[Parameter]
public RenderFragment<TableItem> GridBody { get; set; }
[Parameter]
public IEnumerable<TableItem> Items { get; set; }
<thead>
<tr>
@GridHeader
</tr>
</thead>
@foreach (var element in Items)
{
<tr
@GridRow(element)
</tr>
}
I want to change this for a column based system, like this
<MyGrid>
<GridColumns Context="child">
<GridColumn Header="Nom">
@child.NomPrenom
</GridColumn>
<GridColumn Header="Statut">
@child.LibStatut
</GridColumn>
</GridColumns>
</MyGrid>
在网格组件上,对列进行迭代以首先呈现标题,然后对列和项目进行迭代以呈现表主体。
令人惊讶的是,我没有在互联网上找到这样的例子,也没有找到实现这一目标的好方法。
这是有可能的,因为我在这里找到了这样的示例:https://blazor.syncfusion.com/demos/Grid/DefaultFunctionalities,但不幸的是我没有源代码。
您是否知道我该如何实现?
感谢您的帮助!
答案 0 :(得分:-1)
这是有可能的,因为我在这里找到了这样的示例:https://blazor.syncfusion.com/demos/Grid/DefaultFunctionalities,但是很遗憾,我无法访问源代码。
这是一个简单的演示,如下所示:
1。安装<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Project</title>
</head>
<body>
<form id="form" name="form" method="POST"> {% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save">
</form>
</body>
</html>
NuGet软件包。
注意:对于asp.net core 3.0,您可以安装以下版本:Syncfusion.EJ2.Blazor
,而不是最新的预发行版。
2。通过17.2.0.52-beta
中的CDN或本地npm软件包添加客户端资源。
~/Pages/_Host.cshtml
3。创建剃刀组件:
<head>
<link href="https://cdn.syncfusion.com/ej2/17.3.27/fabric.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ejs.interop.min.js">
</script>
</head>
4。结果:
参考:https://ej2.syncfusion.com/blazor/documentation/grid/data-binding/