Enterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

Table 表格

常用于大数据单表维护

通过 OnQueryAsync 回调获得数据集合

Demo
Loading...

使用 List<TItem> 泛型集合作为数据源时,需要按照下面的步骤进行设置

1. 设置数据源
设置 Table 组件的 Items 属性或者 OnQueryAsync 回调委托方法

protected override void OnInitialized()
{
    base.OnInitialized();

    Items = Foo.GenerateFoo(Localizer);
}

2. 处理新建逻辑
设置 OnAddAsync 回调委托函数处理 新建 逻辑

private Task<Foo> OnAddAsync()
{
    // 此处代码为示例代码
    var foo = new Foo() { DateTime = DateTime.Now, Address = $"自定义地址  {DateTime.Now.Second}" };
    Items.Insert(0, foo);

    // 输出日志信息
    Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Add");
    return Task.FromResult(foo);
}

3. 处理删除逻辑
设置 OnDeleteAsync 回调委托函数处理 删除 逻辑

private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
{
    // 此处代码为示例代码
    Items.RemoveAll(i => items.Contains(i));

    // 输出日志信息
    Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Delete");
    return Task.FromResult(true);
}

4. 处理更新逻辑
设置 OnSaveAsync 回调委托函数处理单元格 更新 逻辑
组件内部所有单元格编辑更新后会自动触发 OnSaveAsync 回调委托,参数是当前更新模型 TItem

private Task<bool> OnDeleteAsync(Foo item, ItemChangedType changedType)
{
    // 此处代码为示例代码
    Trace.Log($"单元格变化通知 类: Foo - 值: 单元格");
    return Task.FromResult(true);
}

高级用法

Demo
  • IsFixedHeader 固定表头 高度设定为 Height="500px"
  • Name 不可编辑显示头像
Loading...
@page "/tables/excel"

<h3>Table 表格</h3>

<h4>常用于大数据单表维护</h4>

<DemoBlock Title="绑定集合" Introduction="通过 <code>OnQueryAsync</code> 回调获得数据集合" Name="OnQuery">
    <Table TItem="Foo" ShowColumnList="true"
           IsExcel="true" IsPagination="true" PageItemsSource="@PageItemsSource" ShowRefresh="true"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" Readonly="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" Editable="false" Align="Alignment.Right" />
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" />
        </TableColumns>
    </Table>

    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<p class="mt-3">使用 <code>List<TItem></code> 泛型集合作为数据源时,需要按照下面的步骤进行设置</p>

<p>
    <div class="code-label">1. 设置数据源</div>
    <div class="mt-2">设置 <code>Table</code> 组件的 <code>Items</code> 属性或者 <code>OnQueryAsync</code> 回调委托方法</div>
</p>

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

    Items = Foo.GenerateFoo(Localizer);
}</Pre>

<p>
    <div class="code-label">2. 处理新建逻辑</div>
    <div class="mt-2">设置 <code>OnAddAsync</code> 回调委托函数处理 <b>新建</b> 逻辑</div>
</p>

<Pre>private Task<Foo> OnAddAsync()
{
    // 此处代码为示例代码
    var foo = new Foo() { DateTime = DateTime.Now, Address = $"自定义地址  {DateTime.Now.Second}" };
    Items.Insert(0, foo);

    // 输出日志信息
    Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Add");
    return Task.FromResult(foo);
}</Pre>

<p>
    <div class="code-label">3. 处理删除逻辑</div>
    <div class="mt-2">设置 <code>OnDeleteAsync</code> 回调委托函数处理 <b>删除</b> 逻辑</div>
</p>

<Pre>private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
{
    // 此处代码为示例代码
    Items.RemoveAll(i => items.Contains(i));

    // 输出日志信息
    Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Delete");
    return Task.FromResult(true);
}</Pre>

<p>
    <div class="code-label">4. 处理更新逻辑</div>
    <div class="mt-2">设置 <code>OnSaveAsync</code> 回调委托函数处理单元格 <b>更新</b> 逻辑</div>
    <div class="mt-2">组件内部所有单元格编辑更新后会自动触发 <code>OnSaveAsync</code> 回调委托,参数是当前更新模型 <code>TItem</code></div>
</p>

<Pre>private Task<bool> OnDeleteAsync(Foo item, ItemChangedType changedType)
{
    // 此处代码为示例代码
    Trace.Log($"单元格变化通知 类: Foo - 值: 单元格");
    return Task.FromResult(true);
}</Pre>

<DemoBlock Title="通过编辑模板单独控制单元格渲染方式" Introduction="高级用法" Name="CellRender">
    <ul class="ul-demo mb-3">
        <li><code>IsFixedHeader</code> 固定表头 高度设定为 <code>Height="500px"</code></li>
        <li><code>Name</code> 不可编辑显示头像</li>
    </ul>
    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500" ShowAddButton="false" ShowDeleteButton="false">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="200">
                <EditTemplate Context="row">
                    <div class="d-flex disabled">
                        <div>
                            <img src="@Foo.GetAvatarUrl(row!.Id)" class="bb-avatar" />
                        </div>
                        <div class="ps-2">
                            <div>@row.Name</div>
                            <div class="bb-sub">@Foo.GetTitle(row!.Id)</div>
                        </div>
                    </div>
                </EditTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Education" Width="160" />
            <TableColumn @bind-Field="@context.Count" Width="160">
                <EditTemplate Context="row">
                    <div class="disabled">
                        <div>@row!.Count %</div>
                        <Progress Value="@row.Count" Color="@Foo.GetProgressColor(row.Count)"></Progress>
                    </div>
                </EditTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
        </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.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Data;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 
/// </summary>
partial class TablesExcel
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

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

        Items = Foo.GenerateFoo(Localizer);
    }

    // 绑定数据源代码
    private static IEnumerable<int> PageItemsSource => new int[] { 10, 20, 40 };

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

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        IEnumerable<Foo> items = Items;

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<Foo>());
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            var invoker = Foo.GetNameSortFunc();
            items = invoker(items, options.SortName, options.SortOrder);
            isSorted = true;
        }

        // 设置记录总数
        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 = isSorted,
            IsFiltered = isFiltered,
            IsSearch = true
        });
    }

    private Task<Foo> OnAddAsync()
    {
        // Excel 模式下新建要求更改数据源
        var foo = new Foo() { DateTime = DateTime.Now, Address = $"自定义地址  {DateTime.Now.Second}" };
        Items.Insert(0, foo);

        // 输出日志信息
        Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Add");
        return Task.FromResult(foo);
    }

    private Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
    {
        // 对象已经更新
        // 输出日志信息
        Trace.Log($"单元格变化通知 类: Foo - 值: 单元格");
        return Task.FromResult(true);
    }

    private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
    {
        Items.RemoveAll(i => items.Contains(i));

        // 输出日志信息
        Trace.Log($"集合值变化通知 列: {Items.Count} - 类型: Delete");
        return Task.FromResult(true);
    }
}

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
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor 组件库 更新到 6.6.0

首先感谢您对本套组件的关注,本目前本套组件已经拥有超过 120 个组件,本组件是基于 Bootstrap 风格的 Blazor 企业级组件库,提供如布局、导航、表单、数据、通知、图标、语音等几大类通用组件,每一个组件都经过静心设计,具有模块化、响应式和优秀的性能。从更多实际场景出发,满足多种场景的需求,极大的减少开发者时间成本,大大缩短开发周期,大幅提高开发效率,并提供了一套 通用权限管理系统 示例工程。Bootstrap Blazor 产品是由一支专业的全职技术团队进行维护,高效的响应速度,多元化的解决方案,长期提供支持,并提供企业级支持。目前已在多家知名国企内部使用,项目最高在线 1200 人稳定运行。右侧为国内人数最多的中文 Blazor QQ 社区二维码,欢迎扫描加群。

组件更新到 6.6.0 更新日志 [传送门] 如果组件给您带来了方便,请您帮忙给项目点亮 Star github gitee

QQGroup
QQ 795206915