Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

自动刷新表格功能

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

自动刷新

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

Demo

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

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

Loading...
@inherits TablesBase
@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">
                <Template Context="v">
                    <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
                </Template>
            </TableColumn>
        </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.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Table
{
    /// <summary>
    /// 
    /// </summary>
    public partial class TablesAutoRefresh
    {
        private List<Foo> AutoItems { get; set; } = new List<Foo>();

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

            AutoItems = Items.Take(2).ToList();
        }

        private Task<QueryData<Foo>> OnRefreshQueryAsync(QueryPageOptions options)
        {
            // 设置记录总数
            var total = AutoItems.Count();

            AutoItems.Insert(0, new Foo()
            {
                Id = total++,
                Name = $"张三 {total:d4}",
                DateTime = DateTime.Now.AddDays(total - 1),
                Address = $"上海市普陀区金沙江路 {random.Next(1000, 2000)} 弄",
                Count = random.Next(1, 100),
                Complete = random.Next(1, 100) > 50,
                Education = random.Next(1, 100) > 50 ? EnumEducation.Primary : EnumEducation.Middel
            });

            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群: BootstrapAdmin & Blazor(795206915)欢迎加群讨论
An error has occurred. This application may no longer respond until reloaded. Reload