Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Table 表格

通过设置 ShowExportButton 设置显示导出按钮,组件内置导出Excel功能

导出功能提供了导出回调方法 OnExportAsync 使用时可以通过提供自定义的导出方法进行数据导出,如果未提供数据导出方法,组件会根据注入的导出服务进行数据导出

注意事项:

BootstrapBlazor.TableExport,组件包使用 EPPlus 组件提供了导出到 Excel 功能,如果需要可以引用其组件包

Nuget 包安装

使用 nuget.org 进行 BootstrapBlazor.TableExport 组件的安装

.NET CLI
dotnet add package BootstrapBlazor.TableExport --version 6.0.0
PackageReference
<PackageReference Include="BootstrapBlazor.TableExport" Version="6.0.0" />
Package Manager
Install-Package BootstrapBlazor.TableExport -Version 6.0.0

注入服务:

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
Loading...

通过设置 OnExportAsync 回调委托方法可自定义导出方法,不设置将使用组件内置导出函数

Demo
Loading...
@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>
// 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;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

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

    /// <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);

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        Version = await VersionManager.GetVersionAsync("bootstrapblazor.tableexport");
    }
}

B 站相关视频链接

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload