
Table 表格
通过设置 ShowExportButton
设置显示导出按钮,组件内置导出Excel功能
导出功能提供了导出回调方法 OnExportAsync
使用时可以通过提供自定义的导出方法进行数据导出,如果未提供数据导出方法,组件会根据注入的导出服务进行数据导出
注意事项:
BootstrapBlazor.TableExport
,组件包使用 EPPlus
组件提供了导出到 Excel
功能,如果需要可以引用其组件包
Nuget 包安装
使用 nuget.org 进行 BootstrapBlazor.TableExport
组件的安装
dotnet add package BootstrapBlazor.TableExport --version latest
<PackageReference Include="BootstrapBlazor.TableExport" Version="latest" />
Install-Package BootstrapBlazor.TableExport -Version latest
注入服务:
public void ConfigureServices(IServiceCollection services)
{
// 增加 BootstrapBlazor 组件
services.AddBootstrapBlazor();
// 增加 Table Excel 导出服务
services.AddBootstrapBlazorTableExcelExport();
}
JS 文件
<script src="_content/BootstrapBlazor.TableExport/js/export.min.js"></script>
通过设置 ShowExportButton
属性是否显示导出按钮,默认为false
Demo
通过设置 OnExportAsync
回调委托方法可自定义导出方法,不设置将使用组件内置导出函数
Demo
通过设置 ExportButtonDropdownTemplate
模板自定义导出按钮下拉框内容
Demo
@page "/tables/export"
<h3>Table 表格</h3>
<h4>通过设置 <code>ShowExportButton</code> 设置显示导出按钮,组件内置导出Excel功能</h4>
<p>导出功能提供了导出回调方法 <code>OnExportAsync</code> 使用时可以通过提供自定义的导出方法进行数据导出,如果未提供数据导出方法,组件会根据注入的导出服务进行数据导出</p>
<p><b>注意事项:</b></p>
<p><a href="https://www.nuget.org/packages?q=BootstrapBlazor.TableExport" target="_blank"><code>BootstrapBlazor.TableExport</code></a>,组件包使用 <code>EPPlus</code> 组件提供了导出到 <code>Excel</code> 功能,如果需要可以引用其组件包</p>
<p><b>Nuget 包安装</b></p>
<p>使用 <a href="https://www.nuget.org/packages?q=BootstrapBlazor.TableExport" target="_blank">nuget.org</a> 进行 <code>BootstrapBlazor.TableExport</code> 组件的安装</p>
<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.TableExport --version @Version</Pre>
<div class="code-label">PackageReference</div>
<Pre class="no-highlight"><PackageReference Include="BootstrapBlazor.TableExport" Version="@Version" /></Pre>
<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.TableExport -Version @Version</Pre>
<p><b>注入服务:</b></p>
<Pre>public void ConfigureServices(IServiceCollection services)
{
// 增加 BootstrapBlazor 组件
services.AddBootstrapBlazor();
// 增加 Table Excel 导出服务
services.AddBootstrapBlazorTableExcelExport();
}</Pre>
<h4>JS 文件</h4>
<Pre><script src="_content/BootstrapBlazor.TableExport/js/export.min.js"></script></Pre>
<DemoBlock Title="表格导出功能" Introduction="通过设置 <code>ShowExportButton</code> 属性是否显示导出按钮,默认为<code>false</code>" Name="ShowExportButton">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
OnQueryAsync="@OnQueryAsync">
<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>
</DemoBlock>
<DemoBlock Title="自定义导出方法" Introduction="通过设置 <code>OnExportAsync</code> 回调委托方法可自定义导出方法,不设置将使用组件内置导出函数" Name="Export">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
OnExportAsync="ExportAsync" OnQueryAsync="@OnQueryAsync">
<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>
</DemoBlock>
<DemoBlock Title="自定义导出下拉框按钮" Introduction="通过设置 <code>ExportButtonDropdownTemplate</code> 模板自定义导出按钮下拉框内容" Name="ExportButtonDropdownTemplate">
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@PageItemsSource"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
OnQueryAsync="@OnQueryAsync">
<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>
<ExportButtonDropdownTemplate>
<div class="dropdown-item" @onclick="@ExcelExportAsync">
<i class="fa fa-file-excel-o"></i>
<span>MS-Excel</span>
</div>
<div class="dropdown-item" @onclick="@CsvExportAsync">
<i class="fa fa-file-excel-o"></i>
<span>MS-CSV</span>
</div>
</ExportButtonDropdownTemplate>
</Table>
</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 BootstrapBlazor.Shared.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
/// Table 组件数据导出示例
/// </summary>
public partial class TablesExport
{
/// <summary>
/// 获得/设置 版本号字符串
/// </summary>
private string Version { get; set; } = "fetching";
private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
[NotNull]
private List<Foo>? Items { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
[Inject]
[NotNull]
private VersionService? VersionManager { get; set; }
[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Items = Foo.GenerateFoo(Localizer);
}
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
IEnumerable<Foo> items = Items;
// 设置记录总数
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
});
}
private static Task<bool> ExportAsync(IEnumerable<Foo> Items) => Task.FromResult(true);
private async Task ExcelExportAsync()
{
await ToastService.Success("Excel 导出", "导出 Excel 数据成功");
}
private async Task CsvExportAsync()
{
await ToastService.Success("CSV 导出", "导出 CSV 数据成功");
}
/// <summary>
/// OnInitializedAsync 方法
/// </summary>
/// <returns></returns>
protected override async Task OnInitializedAsync()
{
Version = await VersionManager.GetVersionAsync("bootstrapblazor.tableexport");
}
}