Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Table 虚拟滚动行

Table 组件显示大数据时通常采用分页加载数据,还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据

无需分页滚动数据时后台按需加载

Demo

需要设置 ScrollMode Height RowHeight PageItems 参数对虚拟滚动进行设置

Loading...

无需分页滚动数据时后台按需加载

Demo

快速滚动时显示行占位,提升用户体验

Loading...
@inherits BootstrapComponentBase
@page "/tables/virtualization"

<h3>Table 虚拟滚动行</h3>

<h4>Table 组件显示大数据时通常采用分页加载数据,还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据</h4>

<DemoBlock Title="正常使用" Introduction="无需分页滚动数据时后台按需加载" Name="Normal">
    <p>需要设置 <code>ScrollMode</code> <code>Height</code> <code>RowHeight</code> <code>PageItems</code> 参数对虚拟滚动进行设置</p>
    <div class="table-virtualize-demo">
        <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="Items" ScrollMode="ScrollMode.Virtual">
            <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" />
                <TableColumn @bind-Field="@context.Complete" />
            </TableColumns>
        </Table>
    </div>
</DemoBlock>

<DemoBlock Title="动态获取数据" Introduction="无需分页滚动数据时后台按需加载" Name="Dynamic">
    <p>快速滚动时显示行占位,提升用户体验</p>
    <div class="table-virtualize-demo">
        <Table TItem="Foo" IsBordered="true" IsStriped="true" ScrollMode="ScrollMode.Virtual" OnQueryAsync="OnQueryAsync">
            <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" />
                <TableColumn @bind-Field="@context.Complete" />
            </TableColumns>
        </Table>
    </div>
</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 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.Samples.Table;

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

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

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

        Items = Foo.GenerateFoo(Localizer);
    }

    private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        await Task.Delay(200);
        var items = Items.Skip(options.StartIndex).Take(options.PageItems);
        return new QueryData<Foo>()
        {
            Items = items,
            TotalCount = Items.Count
        };
    }
}

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