
Table 表格在弹窗内使用
用于带层级关系的数据选择中
弹窗中数据联动
点击工具栏中的选择按钮弹出对话框选择候选数据
Demo
本例中展示如果通过 Modal
组件与 Table
进行联动,通过弹窗中选择数据,然后再进行编辑
- 点击
选择
按钮弹出对话框选择产品Product
- 弹窗中选择产品后点击
确定
按钮关闭弹窗 - 点击
编辑
按钮,由于设置部分数据为只读,只能更改Count
字段
Loading...
@page "/tables/dialog"
<h3>Table 表格在弹窗内使用</h3>
<h4>用于带层级关系的数据选择中</h4>
<DemoBlock Title="弹窗中数据联动" Introduction="点击工具栏中的选择按钮弹出对话框选择候选数据" Name="TableDialog">
<p>本例中展示如果通过 <code>Modal</code> 组件与 <code>Table</code> 进行联动,通过弹窗中选择数据,然后再进行编辑</p>
<ul class="ul-demo mb-3">
<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>
<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>
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
///
/// </summary>
public sealed partial class TablesDialog
{
private static readonly Random random = new();
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
[NotNull]
private Modal? Modal { get; set; }
[NotNull]
private Table<Foo>? ProductTable { get; set; }
[NotNull]
private List<Foo>? Products { get; set; }
[NotNull]
private List<Foo>? ProductSelectItems { get; set; }
private bool _confirm;
private List<Foo> SelectedRows { get; set; } = new List<Foo>();
/// <summary>
///
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Products = new List<Foo>();
ProductSelectItems = Enumerable.Range(1, 5).Select(i => new Foo()
{
Id = i,
Name = Localizer["Foo.Name", $"{i:d4}"],
DateTime = DateTime.Now.AddDays(i - 1),
Address = Localizer["Foo.Address", $"{random.Next(1000, 2000)}"],
Count = random.Next(1, 100),
Complete = random.Next(1, 100) > 50,
Education = EnumEducation.Primary,
Hobby = new string[] { "1" }
}).ToList();
}
private async Task ShowDialog(IEnumerable<Foo> items)
{
await Modal.Toggle();
}
private async Task OnConfirm()
{
_confirm = true;
await Modal.Toggle();
await ProductTable.QueryAsync();
}
private Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
{
var oldItem = Products.FirstOrDefault(i => i.Id == item.Id);
if (oldItem != null)
{
oldItem.Count = item.Count;
}
return Task.FromResult(true);
}
private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
{
Products.RemoveAll(p => items.Contains(p));
return Task.FromResult(true);
}
private Task<QueryData<Foo>> OnQueryEditAsync(QueryPageOptions options)
{
ProductTable.SelectedRows.Clear();
var items = Products;
if (_confirm)
{
items.Clear();
items.AddRange(SelectedRows);
}
_confirm = false;
var total = items.Count;
// 内存分页
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
IsFiltered = true,
IsSearch = true,
IsSorted = true
});
}
private Task<QueryData<Foo>> OnQueryProductAsync(QueryPageOptions options)
{
var items = ProductSelectItems;
var total = items.Count;
// 内存分页
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
});
}
}