
自动刷新表格功能
在某种应用场景中,数据源的变化需要重新刷新表格组件
自动刷新
本示例演示在后台线程中对数据源进行监控,当数据源变化时通知表格组件进行数据刷新
Demo
通过设置 IsAutoRefresh
属性值来开启自动刷新功能,AutoRefreshInterval
属性值默认为 2000 毫秒,此值为自动刷新时间间隔,周期性调用组件的 QueryAsync
方法使表格具有自动刷新功能
本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据
Loading...
通过设置变量控制是否自动更新
本示例通过设置变量控制是否自动更新
Demo
通过点击按钮开始/关闭是否自动更新功能
IsAutoRefresh
当前值:False
Loading...
@page "/tables/autorefresh"
<h3>自动刷新表格功能</h3>
<h4>在某种应用场景中,数据源的变化需要重新刷新表格组件</h4>
<DemoBlock Title="自动刷新" Introduction="本示例演示在后台线程中对数据源进行监控,当数据源变化时通知表格组件进行数据刷新" Name="AutoRefresh">
<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="@OnAutoQueryAsync">
<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" />
</TableColumns>
</Table>
</DemoBlock>
<DemoBlock Title="通过设置变量控制是否自动更新" Introduction="本示例通过设置变量控制是否自动更新" Name="Control">
<p>
<div>通过点击按钮开始/关闭是否自动更新功能</div>
<Button Text="更改 Auto" OnClick="@ToggleAuto" /> <span><code>IsAutoRefresh</code> 当前值:<code>@IsAutoRefresh</code></span>
</p>
<Table TItem="Foo"
IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
IsAutoRefresh="@IsAutoRefresh" AutoRefreshInterval="2000"
OnQueryAsync="@OnManualQueryAsync">
<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" />
</TableColumns>
</Table>
</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;
namespace BootstrapBlazor.Shared.Samples.Table;
/// <summary>
///
/// </summary>
public partial class TablesAutoRefresh
{
private static readonly Random random = new();
[Inject]
[NotNull]
private IStringLocalizer<Foo>? Localizer { get; set; }
private List<Foo> AutoItems { get; set; } = new List<Foo>();
private List<Foo> ManualItems { get; set; } = new List<Foo>();
private bool IsAutoRefresh { get; set; }
private void ToggleAuto() => IsAutoRefresh = !IsAutoRefresh;
private Task<QueryData<Foo>> OnAutoQueryAsync(QueryPageOptions options) => GenerateFoos(options, AutoItems);
private Task<QueryData<Foo>> OnManualQueryAsync(QueryPageOptions options) => GenerateFoos(options, ManualItems);
private Task<QueryData<Foo>> GenerateFoos(QueryPageOptions options, List<Foo> foos)
{
// 设置记录总数
var total = foos.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)}"];
foos.Insert(0, foo);
if (foos.Count > 10)
{
foos.RemoveRange(10, 1);
total = 10;
}
// 内存分页
var items = foos.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
return Task.FromResult(new QueryData<Foo>()
{
Items = items,
TotalCount = total
});
}
}