Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格在弹窗内使用

用于带层级关系的数据选择中

弹窗中数据联动

点击工具栏中的选择按钮弹出对话框选择候选数据

Demo

本例中展示如果通过 Modal 组件与 Table 进行联动,通过弹窗中选择数据,然后再进行编辑

  • 点击 选择 按钮弹出对话框选择产品 Product
  • 弹窗中选择产品后点击 确定 按钮关闭弹窗
  • 点击 编辑 按钮,由于设置部分数据为只读,只能更改 Count 字段
Loading...
@page "/tables/dialog"

<h3>Table 表格在弹窗内使用</h3>

<h4>用于带层级关系的数据选择中</h4>

<Block Title="弹窗中数据联动" Introduction="点击工具栏中的选择按钮弹出对话框选择候选数据">
    <p>本例中展示如果通过 <code>Modal</code> 组件与 <code>Table</code> 进行联动,通过弹窗中选择数据,然后再进行编辑</p>
    <ul class="ul-demo">
        <li>点击 <code>选择</code> 按钮弹出对话框选择产品 <code>Product</code></li>
        <li>弹窗中选择产品后点击 <code>确定</code> 按钮关闭弹窗</li>
        <li>点击 <code>编辑</code> 按钮,由于设置部分数据为只读,只能更改 <code>Count</code> 字段</li>
    </ul>
    <Table TItem="Foo" @ref="ProductTable"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
           OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableToolbarTemplate>
            <TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa fa-fw fa-edit" Text="选择" OnClickCallback="@ShowDialog" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Readonly="true" />
            <TableColumn @bind-Field="@context.Name" Readonly="true" />
            <TableColumn @bind-Field="@context.Count" Width="80" />
        </TableColumns>
    </Table>
</Block>

<Modal @ref="Modal">
    <ModalDialog Title="选择项目" IsCentered="true">
        <BodyTemplate>
            <Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
                   ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
                   OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
                <TableColumns>
                    <TableColumn @bind-Field="@context.DateTime" />
                    <TableColumn @bind-Field="@context.Name" />
                    <TableColumn @bind-Field="@context.Count" />
                </TableColumns>
            </Table>
        </BodyTemplate>
        <FooterTemplate>
            <Button Text="确定" Icon="fa fa-check-square-o" OnClick="@OnConfirm" />
        </FooterTemplate>
    </ModalDialog>
</Modal>
根据相关法律政策,该内容无法显示

B 站相关视频链接

[传送门]

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload