Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

自动刷新表格功能

在某种应用场景中,数据源的变化需要重新刷新表格组件

本示例演示在后台线程中对数据源进行监控,当数据源变化时通知表格组件进行数据刷新

Demo

通过设置 IsAutoRefresh 属性值来开启自动刷新功能,AutoRefreshInterval 属性值默认为 2000 毫秒,此值为自动刷新时间间隔,周期性调用组件的 QueryAsync 方法使表格具有自动刷新功能

本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据

Loading...

本示例通过设置变量控制是否自动更新

Demo

通过点击按钮开始/关闭是否自动更新功能
IsAutoRefresh 当前值:False

Loading...
@page "/tables/autorefresh"

<h3>自动刷新表格功能</h3>

<h4>在某种应用场景中,数据源的变化需要重新刷新表格组件</h4>

<Block Title="自动刷新" Introduction="本示例演示在后台线程中对数据源进行监控,当数据源变化时通知表格组件进行数据刷新">
    <p>通过设置 <code>IsAutoRefresh</code> 属性值来开启自动刷新功能,<code>AutoRefreshInterval</code> 属性值默认为 2000 毫秒,此值为自动刷新时间间隔,周期性调用组件的 <code>QueryAsync</code> 方法使表格具有自动刷新功能</p>
    <p>本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           IsAutoRefresh="true" AutoRefreshInterval="2000"
           OnQueryAsync="@OnRefreshQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" ComponentType="typeof(Switch)" />
        </TableColumns>
    </Table>
</Block>

<Block Title="通过设置变量控制是否自动更新" Introduction="本示例通过设置变量控制是否自动更新">
    <p>
        <div>通过点击按钮开始/关闭是否自动更新功能</div>
        <Button Text="更改 Auto" OnClick="@ClickIsAutoRefresh" /> <span>IsAutoRefresh 当前值:@IsAutoRefresh</span>
    </p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           IsAutoRefresh="@IsAutoRefresh" AutoRefreshInterval="2000"
           OnQueryAsync="@OnRefreshQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" ComponentType="typeof(Switch)" />
        </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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
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 TablesAutoRefresh
    {
        private static readonly Random random = new();

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

        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

        private List<Foo> AutoItems { get; set; } = new List<Foo>();

        private bool IsAutoRefresh { get; set; } = false;

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            // 模拟异步获取数据耗时 100ms
            await Task.Delay(100);

            AutoItems = Foo.GenerateFoo(Localizer).Take(2).ToList();
        }

        private void ClickIsAutoRefresh() => IsAutoRefresh = !IsAutoRefresh;

        private Task<QueryData<Foo>> OnRefreshQueryAsync(QueryPageOptions options)
        {
            // 设置记录总数
            var total = AutoItems.Count;
            var foo = Foo.Generate(Localizer);
            foo.Id = total++;
            foo.Name = Localizer["Foo.Name", total.ToString("D4")];
            foo.Address = Localizer["Foo.Address", $"{random.Next(1000, 2000)}"];

            AutoItems.Insert(0, foo);

            if (AutoItems.Count > 10)
            {
                AutoItems.RemoveRange(10, 1);
                total = 10;
            }

            // 内存分页
            var items = AutoItems.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

            return Task.FromResult(new QueryData<Foo>()
            {
                Items = items,
                TotalCount = total
            });
        }
    }
}

B 站相关视频链接

[传送门]

交流群

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