Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

显示数据加载功能

调用远端数据接口时,由于网络原因可能出现延时情况,可使用显示加载功能进行屏蔽

设置 ShowLoading 即可

Demo
@page "/tables/loading"

<h3>显示数据加载功能</h3>

<h4>调用远端数据接口时,由于网络原因可能出现延时情况,可使用显示加载功能进行屏蔽</h4>

<Block Title="基础用法" Introduction="设置 <code>ShowLoading</code> 即可">
    <Table TItem="Foo" PageItemsSource="@PageItemsSource" AutoGenerateColumns="true"
           IsPagination="true" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" ShowLoading="true" ShowSearch="true"
           OnAddAsync="@OnAddAsync" OnEditAsync="@OnEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.Hobby" Data="@Hobbys" />
        </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.Concurrent;
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 TablesLoading
    {
        private static readonly ConcurrentDictionary<Type, Func<IEnumerable<Foo>, string, SortOrder, IEnumerable<Foo>>> SortLambdaCache = new();

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

        private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

        [NotNull]
        private IEnumerable<SelectedItem>? Hobbys { get; set; }

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

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

            Hobbys = Foo.GenerateHobbys(Localizer);
            Items = Foo.GenerateFoo(Localizer);
        }

        private static async Task<Foo> OnAddAsync()
        {
            // 模拟延时
            await Task.Delay(1000);
            return new Foo() { DateTime = DateTime.Now };
        }

        private static async Task<Foo> OnEditAsync(Foo item)
        {
            // 模拟延时
            await Task.Delay(1000);
            return item;
        }

        private async Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
        {
            // 模拟延时
            await Task.Delay(1000);
            if (changedType == ItemChangedType.Add)
            {
                item.Id = Items.Max(i => i.Id) + 1;
                Items.Add(item);
            }
            else
            {
                var oldItem = Items.FirstOrDefault(i => i.Id == item.Id);
                if (oldItem != null)
                {
                    oldItem.Name = item.Name;
                    oldItem.Address = item.Address;
                    oldItem.DateTime = item.DateTime;
                    oldItem.Count = item.Count;
                    oldItem.Complete = item.Complete;
                    oldItem.Education = item.Education;
                }
            }
            return true;
        }

        private async Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
        {
            // 模拟延时
            await Task.Delay(1000);
            items.ToList().ForEach(i => Items.Remove(i));
            return true;
        }

        private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
        {
            // 模拟延时
            await Task.Delay(1000);
            IEnumerable<Foo> items = Items;

            // 处理高级搜索
            var searchModel = options.SearchModel as Foo;
            var isSearch = false;
            if (!string.IsNullOrEmpty(searchModel?.Name))
            {
                items = items.Where(item => item.Name?.Contains(searchModel.Name, StringComparison.OrdinalIgnoreCase) ?? false);
                isSearch = true;
            }

            if (!string.IsNullOrEmpty(searchModel?.Address))
            {
                items = items.Where(item => item.Address?.Contains(searchModel.Address, StringComparison.OrdinalIgnoreCase) ?? false);
                isSearch = true;
            }

            // 处理 Searchable=true 列与 SeachText 模糊搜索
            if (options.Searchs.Any())
            {
                items = items.Where(options.Searchs.GetFilterFunc<Foo>(FilterLogic.Or));
            }
            else
            {
                // 处理 SearchText 模糊搜索
                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 new QueryData<Foo>()
            {
                Items = items,
                TotalCount = total,
                IsSorted = isSorted,
                IsFiltered = isFiltered,
                IsSearch = isSearch
            };
        }
    }
}

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