Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit



设置 MultiHeaderTemplate 模板即可

@page "/tables/multi-header"



<Block Title="基础用法" Introduction="设置 <code>MultiHeaderTemplate</code> 模板即可">
    <Table TItem="Foo" OnQueryAsync="@OnQueryAsync" IsBordered="true" IsStriped="true">
                <th rowspan="2"><div class="table-cell" style="height: 94px; justify-content: center;">时间</div></th>
                <th colspan="2"><div class="table-cell" style="justify-content: center">个人信息</div></th>
                <th><div class="table-cell">个人姓名</div></th>
                <th><div class="table-cell">个人地址</div></th>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Filterable="true" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Filterable="true" Sortable="true" />
// 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;
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>
    /// </summary>
    public partial class TablesHeader
        private List<Foo>? Items { get; set; }

        private IStringLocalizer<Foo>? Localizer { get; set; }

        private static readonly ConcurrentDictionary<Type, Func<IEnumerable<Foo>, string, SortOrder, IEnumerable<Foo>>> SortLambdaCache = new();

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override void OnInitialized()

            Items = Foo.GenerateFoo(Localizer);

        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 = SortLambdaCache.GetOrAdd(typeof(Foo), key => LambdaExtensions.GetSortLambda<Foo>().Compile());
                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

B 站相关视频链接



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