BootstrapBlazor使用Table快速录入信息

使用Table快速录入信息

项目代码下载

在物流行业开发系统时，主子表同时录入信息的场景是很常见的，本文介绍如何使用BootstrapBlazor快速实现功能。

先看效果

实现步骤

1. 创建dto类，dto类需满足主子表结构，如下类型

public class Dto
{
    [Display(Name = "主表名称")]
    public string Name { get; set; }

    [Display(Name = "子表内容")]
    public List<Foo> Items { get; set; } = new List<Foo>();
}

2. 使用Table组件，并设置

• ShowDefaultButtons="false" 目的是不显示框架的默认按钮，由自己来实现
• ShowExtendButtons="true" 目的是在每个行中显示扩展按钮列
• ShowToolbar="true" 目的是显示表头工具栏上的按钮，我们将创建新行的功能按钮布置在这里，当然这一步可以根据自己项目情况调整。
• Items="Model.Items" 必须项，设置表格数据列表。

3. 设置每个列的模板，需注意：

• 模板为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>

4. 定义增加新行的按钮

<TableToolbarTemplate>
    <Button Text="AddRow" TItem="Foo" OnClick="()=> Model.Items.Add(new Foo())" />
</TableToolbarTemplate>

5. 定义行内删除按钮

<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;
    }
}

项目代码下载