Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

固定表头功能

滚动数据时表头固定方便查看各列表头信息

本组件固定表头做法采用的是 双表头 做法,常见问题时出现列不对齐的问题,根据自己实际情况请自行添加部分样式
固定表头用法请尽可能的设置每列宽度,以避免列宽不对齐的问题

宽度自适应

设置 Height=200 固定表头

Demo

数据比较多加载后即出现纵向滚动条示例

请设置个列宽度,允许一列宽度不设置,进行自动填充

Loading...

宽度固定

设置 Height=200 固定表头,当每页显示数据为 10 行时高度超出设置值 200 后,Table 组件出现纵向滚动条

Demo

所有列均设置宽度,当屏幕过小时会自动出现横向滚动条

Loading...

宽度可调整

固定表头的同时设置 AllowResizing 属性,使列宽可以调整

Demo

通过设置 Height 参数固定表头
通过设置 AllowResizing 参数允许调整列宽

Loading...
@inherits TablesBaseQuery
@page "/tables/header"

<h3>固定表头功能</h3>

<h4>滚动数据时表头固定方便查看各列表头信息</h4>

<p>
    本组件固定表头做法采用的是 <code>双表头</code> 做法,常见问题时出现列不对齐的问题,根据自己实际情况请自行添加部分样式
    <br />
    固定表头用法请尽可能的设置每列宽度,以避免列宽不对齐的问题
</p>

<Block Title="宽度自适应" Introduction="设置 <code>Height=200</code> 固定表头">
    <p>数据比较多加载后即出现纵向滚动条示例</p>
    <p>请设置个列宽度,允许一列宽度不设置,进行自动填充</p>
    <Table TItem="Foo" Items="@Items.Take(10)" Height="200" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="宽度固定" Introduction="设置 <code>Height=200</code> 固定表头,当每页显示数据为 <code>10</code> 行时高度超出设置值 <code>200</code> 后,Table 组件出现纵向滚动条">
    <p>
        所有列均设置宽度,当屏幕过小时会自动出现横向滚动条
    </p>
    <Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsMultipleSelect="true" Height="200">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>
</Block>

<Block Title="宽度可调整" Introduction="固定表头的同时设置 <code>AllowResizing</code> 属性,使列宽可以调整">
    <p>
        通过设置 <code>Height</code> 参数固定表头
        <br />
        通过设置 <code>AllowResizing</code> 参数允许调整列宽
    </p>
    <Table TItem="Foo" Items="@Items.Take(10)"
           IsBordered="true" IsMultipleSelect="true" IsPagination="true"
           Height="200" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </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 System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public abstract class TablesBaseQuery : TablesBase
    {
        private static readonly ConcurrentDictionary<Type, Func<IEnumerable<Foo>, string, SortOrder, IEnumerable<Foo>>> SortLambdaCache = new();

        /// <summary>
        ///
        /// </summary>
        protected Foo SearchModel { get; set; } = new Foo();

        /// <summary>
        ///
        /// </summary>
        /// <param name="item"></param>
        /// <returns></returns>
        protected static Task OnResetSearchAsync(Foo item)
        {
            item.Name = "";
            item.Address = "";
            return Task.CompletedTask;
        }

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

        /// <summary>
        ///
        /// </summary>
        /// <param name="options"></param>
        /// <returns></returns>
        protected Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options) => FooQueryAsync(Items, options);

        /// <summary>
        ///
        /// </summary>
        /// <param name="items"></param>
        /// <param name="options"></param>
        /// <returns></returns>
        protected Task<QueryData<Foo>> FooQueryAsync(IEnumerable<Foo> items, QueryPageOptions options)
        {
            if (!string.IsNullOrEmpty(SearchModel.Name)) items = items.Where(item => item.Name?.Contains(SearchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
            if (!string.IsNullOrEmpty(SearchModel.Address)) items = items.Where(item => item.Address?.Contains(SearchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);

            if (options.Searchs.Any())
            {
                // 针对 SearchText 进行模糊查询
                items = items.Where(options.Searchs.GetFilterFunc<Foo>(FilterLogic.Or));
            }
            else
            {
                if (!string.IsNullOrEmpty(options.SearchText))
                    items = items.Where(item => (item.Name?.Contains(options.SearchText) ?? false)
                                 || (item.Address?.Contains(options.SearchText) ?? false));
            }

            // 过滤
            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 = !string.IsNullOrEmpty(SearchModel.Name) || !string.IsNullOrEmpty(SearchModel.Address)
            });
        }
    }
}

B 站相关视频链接

[传送门]

交流群

QQ群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload