Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Table 统计功能

用于数据统计

设置 ShowFooter=true 显示 Footer 自定义合计功能

Demo

Table 组件有 TableFooter 模板,其数据上下文为 Table 组件的数据集合 IEnumerable<TItem>

TableFooter 模板中关联的上下文 context 值为当页数据集合

TableFooter 模板内可以自定义单元格 td 内容,也可以使用内置的 TableFooterCell 组件进行数据显示

设置 FooterTemplate 自定义表格底部显示内容

Demo

FooterTemplate 组件有 TableFooter 模板,其数据上下文为 Table 组件的数据集合 IEnumerable<TItem>

@page "/tables/footer"

<h3>Table 统计功能</h3>

<h4>用于数据统计</h4>

<Block Title="数据统计示例" Introduction="设置 <code>ShowFooter=true</code> 显示 <code>Footer</code> 自定义合计功能">
    <p><code>Table</code> 组件有 <code>TableFooter</code> 模板,其数据上下文为 <code>Table</code> 组件的数据集合 <code>IEnumerable&lt;TItem&gt;</code></p>
    <p><code>TableFooter</code> 模板中关联的上下文 <code>context</code> 值为当页数据集合</p>
    <p><code>TableFooter</code> 模板内可以自定义单元格 <code>td</code> 内容,也可以使用内置的 <code>TableFooterCell</code> 组件进行数据显示</p>
    <Table TItem="Foo" ShowFooter="true" class="footer-demo"
           IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
        <TableFooter>
            <TableFooterCell Text="合计:" colspan="3" Align="@Align" />
            <TableFooterCell Aggregate="@Aggregate" Field="@nameof(Foo.Count)" />
        </TableFooter>
    </Table>
    <div class="mt-3 btn-group">
        <Button Icon="fa fa-align-left" Text="@Left" OnClick="() => Align = Alignment.Left" />
        <Button Icon="fa fa-align-center" Text="@Center" OnClick="() => Align = Alignment.Center" />
        <Button Icon="fa fa-align-right" Text="@Right" OnClick="() => Align = Alignment.Right" />
    </div>
    <div class="mt-3 btn-group">
        <Button Text="Sum" OnClick="() => Aggregate = AggregateType.Sum" />
        <Button Text="Average" OnClick="() => Aggregate = AggregateType.Average" />
        <Button Text="Count" OnClick="() => Aggregate = AggregateType.Count" />
        <Button Text="Min" OnClick="() => Aggregate = AggregateType.Min" />
        <Button Text="Max" OnClick="() => Aggregate = AggregateType.Max" />
    </div>
</Block>

<Block Title="Footer 模板" Introduction="设置 <code>FooterTemplate</code> 自定义表格底部显示内容">
    <p><code>FooterTemplate</code> 组件有 <code>TableFooter</code> 模板,其数据上下文为 <code>Table</code> 组件的数据集合 <code>IEnumerable&lt;TItem&gt;</code></p>
    <Table TItem="Foo" ShowFooter="true" class="footer-demo"
           IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
        <FooterTemplate>
            <tr>
                <td colspan="4">
                    <div style="text-align: right;">
                        这里可以写一些描述性的语句
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="d-flex align-items-center justify-content-end" style="line-height: 3;">合计:</div>
                </td>
                <td>
                    <div class="footer-customer">
                        <div>
                            Average: @context.Average(i => i.Count)
                        </div>
                        <hr />
                        <div>
                            Sum: @context.Sum(i => i.Count)
                        </div>
                    </div>
                </td>
            </tr>
        </FooterTemplate>
    </Table>
</Block>

<style>
    .footer-customer {
        text-align: center;
        color: #222;
    }

    .footer-demo hr {
        margin: 0;
    }
</style>
// 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 TablesFooter
    {
        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

        [Inject]
        [NotNull]
        private IStringLocalizer<TablesFooter>? LocalizerFooter { get; set; }

        private static IEnumerable<int> PageItemsSource => new int[] { 2, 4, 10, 20 };

        [NotNull]
        private IEnumerable<Foo>? Items { get; set; }

        [NotNull]
        private string? Left { get; set; }

        [NotNull]
        private string? Center { get; set; }

        [NotNull]
        private string? Right { get; set; }

        private Alignment Align { get; set; }

        private AggregateType Aggregate { get; set; }

        /// <summary>
        /// 
        /// </summary>
        protected override void OnInitialized()
        {
            base.OnInitialized();

            Items = Foo.GenerateFoo(Localizer);
            Left ??= LocalizerFooter[nameof(Left)];
            Center ??= LocalizerFooter[nameof(Center)];
            Right ??= LocalizerFooter[nameof(Right)];
        }

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

B 站相关视频链接

[传送门]

交流群

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