Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

TablesExcelTitle

Commonly used for large data sheet maintenance

binding collection

Get data collection through OnQueryAsync callback

Demo

@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo" ShowToolbar="true" ShowRefresh="true" ShowColumnList="true" ShowExtendButtons="true"
           IsExcel="true" IsPagination="true" PageItemsSource="@PageItemsSource"
           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" />
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

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

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

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

        Items = Foo.GenerateFoo(LocalizerFoo);
    }

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

When using the List<TItem> generic collection as a data source, you need to follow the steps below to set

1. Set the data source

Set the Items property of the Table component or the OnQueryAsync callback delegate method

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

    Items = Foo.GenerateFoo(Localizer);
}

2. Handle the new logic

Set the OnAddAsync callback delegate function to handle the New logic

private Task<Foo> OnAddAsync()
{
    // The code here is sample code
    var foo = new Foo() { DateTime = DateTime.Now, Address = $"custom address {DateTime.Now.Second}" };
    Items.Insert(0, foo);

    // output log information
    Trace.Log($"Collection value change notification column: {Items.Count} - Type: Add");
    return Task.FromResult(foo);
}

3. Handle delete logic

Set the OnDeleteAsync callback delegate function to handle the delete logic

private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
{
    // The code here is sample code
    Items.RemoveAll(i => items.Contains(i));

    // output log information
    Trace.Log($"Collection value change notification column: {Items.Count} - Type: Delete");
    return Task.FromResult(true);
}

4. Handle the update logic

Set the OnSaveAsync callback delegate function to handle the cell update logic

After all cells in the component are edited and updated, the OnSaveAsync callback delegate will be automatically triggered, and the parameter is the current update model TItem

private Task<bool> OnDeleteAsync(Foo item, ItemChangedType changedType)
{
    // The code here is sample code
    Trace.Log($"Cell Change Notification Class: Foo - value: cell");
    return Task.FromResult(true);
}

Individually control how cells are rendered by editing the template

Advanced usage

Demo

IsFixedHeader fixed header height is set to Height='500px'
Name is not editable display avatar

@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo" Items="@Items" IsBordered="true" IsExcel="true" IsFixedHeader="true" Height="500">
        <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>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

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

        Items = Foo.GenerateFoo(LocalizerFoo);
    }
}

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

TablesExcelTitle

Commonly used for large data sheet maintenance

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01