Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 表格

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

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

注意事项:

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

Nuget 包安装

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

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

注入服务:

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">&lt;PackageReference Include="BootstrapBlazor.TableExport" Version="@Version" /&gt;</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>&lt;script src="_content/BootstrapBlazor.TableExport/js/export.min.js"&gt;&lt;/script&gt;</Pre>


<Block Title="表格导出功能" Introduction="通过设置 <code>ShowExportButton</code> 属性是否显示导出按钮,默认为<code>false</code>">
    <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>
</Block>

<Block Title="自定义导出方法" Introduction="通过设置 <code>OnExportAsync</code> 回调委托方法可自定义导出方法,不设置将使用组件内置导出函数">
    <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>
</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.DependencyInjection;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Table
{
    /// <summary>
    /// Table 组件数据导出示例
    /// </summary>
    public partial class TablesExport
    {
        private static readonly ConcurrentDictionary<Type, Func<IEnumerable<Foo>, string, SortOrder, IEnumerable<Foo>>> SortLambdaCache = new();

        /// <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 NugetVersionService? 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群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload