使用Table快速录入信息
在物流行业开发系统时,主子表同时录入信息的场景是很常见的,本文介绍如何使用BootstrapBlazor快速实现功能。
先看效果
实现步骤
- 创建dto类,dto类需满足主子表结构,如下类型
public class Dto
{
[Display(Name = "主表名称")]
public string Name { get; set; }
[Display(Name = "子表内容")]
public List<Foo> Items { get; set; } = new List<Foo>();
}
- 使用Table组件,并设置
ShowDefaultButtons="false"
目的是不显示框架的默认按钮,由自己来实现ShowExtendButtons="true"
目的是在每个行中显示扩展按钮列ShowToolbar="true"
目的是显示表头工具栏上的按钮,我们将创建新行的功能按钮布置在这里,当然这一步可以根据自己项目情况调整。Items="Model.Items"
必须项,设置表格数据列表。
- 设置每个列的模板,需注意:
- 模板为
BootstrapInput
类型的,需对onfocusout
进行回调,参考如下
<TableColumn @bind-Field="@context.Name">
<Template Context="v">
<BootstrapInput @bind-Value="v.Value" @onfocusout="e=>((Foo)v.Row).Name=v.Value" />
</Template>
</TableColumn>
- 模板为
DateTimePicker
类型的,需对ValueChanged
进行回调,参考如下
<TableColumn @bind-Field="@context.DateTime">
<Template Context="v">
<DateTimePicker Value="v.Value" TValue="DateTime" ValueChanged="t=>((Foo)v.Row).DateTime=t" />
</Template>
</TableColumn>
- 模板为
Select
类型的,需对ValueChanged
进行回调,参考如下
<TableColumn @bind-Field="@context.Education">
<Template Context="v">
<Select Value="v.Value" TValue="EnumEducation?" ValueChanged="d=>((Foo)v.Row).Education=d" />
</Template>
</TableColumn>
- 定义增加新行的按钮
<TableToolbarTemplate>
<Button Text="AddRow" TItem="Foo" OnClick="()=> Model.Items.Add(new Foo())" />
</TableToolbarTemplate>
- 定义行内删除按钮
<RowButtonTemplate>
<TableCellButton Color="Color.Danger" Text="Delete" OnClick="()=>Model.Items.Remove(context)" />
</RowButtonTemplate>
整体实现代码
@page "/Create"
<h1>Table主子表创建</h1>
<BootstrapInput @bind-Value="Model.Name" ShowLabel="true" />
<Table TItem="Foo" ShowDefaultButtons="false" ShowExtendButtons="true" ShowToolbar="true" Items="Model.Items" ShowRefresh="false" style="margin:20px;">
<TableColumns>
<TableColumn @bind-Field="@context.Name">
<Template Context="v">
<BootstrapInput @bind-Value="v.Value" @onfocusout="e=>((Foo)v.Row).Name=v.Value" />
</Template>
</TableColumn>
<TableColumn @bind-Field="@context.DateTime">
<Template Context="v">
<DateTimePicker Value="v.Value" TValue="DateTime" ValueChanged="t=>((Foo)v.Row).DateTime=t" />
</Template>
</TableColumn>
<TableColumn @bind-Field="@context.Address">
<Template Context="v">
<BootstrapInput @bind-Value="v.Value" @onfocusout="e=>((Foo)v.Row).Address=v.Value" />
</Template>
</TableColumn>
<TableColumn @bind-Field="@context.Education">
<Template Context="v">
<Select Value="v.Value" TValue="EnumEducation?" ValueChanged="d=>((Foo)v.Row).Education=d" />
</Template>
</TableColumn>
</TableColumns>
<TableToolbarTemplate>
<Button Text="AddRow" TItem="Foo" OnClick="()=> Model.Items.Add(new Foo())" />
</TableToolbarTemplate>
<RowButtonTemplate>
<TableCellButton Color="Color.Danger" Text="Delete" OnClick="()=>Model.Items.Remove(context)" />
</RowButtonTemplate>
</Table>
<div style="text-align:center;padding:10px;">
<Button Text="提交" OnClick="OnSubmit" />
</div>
@if (isSubmited)
{
<h1>提交内容</h1>
<Display DisplayText="主表名称" @bind-Value="Model.Name" />
<Table TItem="Foo" ShowDefaultButtons="false" ShowExtendButtons="true" ShowToolbar="true" Items="Model.Items" ShowRefresh="false">
<TableColumns>
<TableColumn @bind-Field="@context.Name">
</TableColumn>
<TableColumn @bind-Field="@context.DateTime">
</TableColumn>
<TableColumn @bind-Field="@context.Address">
</TableColumn>
<TableColumn @bind-Field="@context.Education">
</TableColumn>
</TableColumns>
</Table>
}
@code
{
Dto Model = new Dto();
bool isSubmited;
void OnSubmit()
{
isSubmited = true;
}
}