
Table 表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
带 Toolbar 的表格
设置 ShowToolbar
显示工具条组件
Demo
Loading...
带查询的表格
设置 ShowSearch
显示查询组件
Demo
Loading...
自定义扩展按钮
设置 TableToolbarTemplate
模板添加自定义扩展按钮
Demo
本例中实现经典的应用场景
- 点击下载按钮,后台开启下载线程进行数据处理,
禁用
下载按钮 - 前台显示进度条提示,正在打包导出,此期间可以处理其他事务
- 数据处理完成后,关闭前台提示弹窗,
恢复
下载按钮
本例中通过设置 TableToolbarButton
按钮的 IsAsync
属性开启 异步操作模式,请注意 OnClickCallback
回调委托内需要使用真正的 异步操作 否则无效果
Loading...
自定义显示功能按钮
通过设置 ShowAddButton
ShowEditButton
ShowDeleteButton
属性值来控制单独功能按钮是否显示,当 ShowDefaultButtons
设置为 false
时,所有按钮均不显示
Demo
Loading...
@page "/tables/toolbar"
@inject ToastService ToastService
<h3>Table 表格</h3>
<h4>用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。</h4>
<Block Title="带 Toolbar 的表格" Introduction="设置 <code>ShowToolbar</code> 显示工具条组件">
<Table TItem="Foo"
IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
IsMultipleSelect="true" ShowToolbar="true" ShowDefaultButtons="false"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
</TableColumns>
</Table>
</Block>
<Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件">
<Table TItem="Foo"
IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
OnQueryAsync="@OnSearchQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
</TableColumns>
</Table>
</Block>
<Block Title="自定义扩展按钮" Introduction="设置 <code>TableToolbarTemplate</code> 模板添加自定义扩展按钮">
<p>本例中实现经典的应用场景</p>
<ul class="ul-demo">
<li>点击下载按钮,后台开启下载线程进行数据处理,<code>禁用</code> 下载按钮</li>
<li>前台显示进度条提示,正在打包导出,此期间可以处理其他事务</li>
<li>数据处理完成后,关闭前台提示弹窗,<code>恢复</code> 下载按钮</li>
</ul>
<p>本例中通过设置 <code>TableToolbarButton</code> 按钮的 <code>IsAsync</code> 属性开启 <b>异步操作模式</b>,请注意 <code>OnClickCallback</code> 回调委托内需要使用真正的 <b>异步操作</b> 否则无效果</p>
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="false" ShowExtendButtons="false"
OnQueryAsync="@OnQueryAsync">
<TableToolbarTemplate>
<TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa fa-fw fa-download" Text="下载1" IsAsync OnClickCallback="@DownloadAsync" />
<TableToolbarButton TItem="Foo" Color="Color.Success" Icon="fa fa-fw fa-edit" Text="下载2" IsAsync OnClickCallback="@DownloadAsync" />
</TableToolbarTemplate>
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Address" />
</TableColumns>
</Table>
</Block>
<Block Title="自定义显示功能按钮" Introduction="通过设置 <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> 属性值来控制单独功能按钮是否显示,当 <code>ShowDefaultButtons</code> 设置为 <code>false</code> 时,所有按钮均不显示">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowExtendButtons="true"
OnQueryAsync="@OnQueryAsync" OnDeleteAsync="@OnDeleteAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" Width="100" />
<TableColumn @bind-Field="@context.Address" />
<TableColumn @bind-Field="@context.Count" />
</TableColumns>
</Table>
</Block>
// 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 BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;
namespace BootstrapBlazor.Shared.Pages.Table
{
/// <summary>
///
/// </summary>
public sealed partial class TablesToolbar
{
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
private static IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };
[NotNull]
private List<Foo>? Items { get; set; }
/// <summary>
///
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(Localizer);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
// 设置记录总数
var total = Items.Count;
// 内存分页
var items = Items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total,
IsSorted = true,
IsFiltered = true,
IsSearch = true
});
}
private Task<QueryData<Foo>> OnSearchQueryAsync(QueryPageOptions options)
{
var items = Items.AsEnumerable();
if (!string.IsNullOrEmpty(options.SearchText))
{
// 针对 SearchText 进行模糊查询
items = items.Where(i => (i.Address ?? "").Contains(options.SearchText)
|| (i.Name ?? "").Contains(options.SearchText));
}
// 设置记录总数
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,
IsSorted = true,
IsFiltered = true,
IsSearch = true
});
}
private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
{
items.ToList().ForEach(foo => Items.Remove(foo));
return Task.FromResult(true);
}
private async Task DownloadAsync(IEnumerable<Foo> items)
{
// 构造弹窗配置信息,进行弹窗操作
var cate = ToastCategory.Information;
var title = "自定义下载示例";
var content = "请先选择数据,然后点击下载按钮";
if (items.Any())
{
cate = ToastCategory.Success;
content = $"开始打包选中的 {items.Count()} 条数据,完成后自动关闭本窗口";
}
var option = new ToastOption()
{
Category = cate,
Title = title,
Content = content,
};
// 弹出 Toast
await ToastService.Show(option);
// 如果已选择下载项进行打包下载操作
if (items.Any())
{
// 禁止自动关闭
option.IsAutoHide = false;
// 开启后台进程进行数据处理
// 传递 Option 过去是为了异步操作结束后可以关闭弹窗
await MockDownLoadAsync();
// 关闭 option 相关联的弹窗
await option.Close();
// 弹窗告知下载完毕
await ToastService.Show(new ToastOption()
{
Category = ToastCategory.Success,
Title = "自定义下载示例",
Content = "数据下载完毕",
});
}
}
private async Task MockDownLoadAsync()
{
// 此处模拟打包下载数据耗时 5 秒
await Task.Delay(5000);
}
}
}