Blazor 组件QuickGrid

QuickGrid 组件是一款Razor组件，其特色在于能够迅速且高效地以表格形式呈现数据。该组件旨在简化常见网格呈现方案，为用户提供便捷的数据网格组件，并可作为构建数据网格组件的参考架构与性能基准。

首先我们需要添加包引用：

Microsoft.AspNetCore.Components.QuickGrid

接下来我们创建 QuickGridExample.razor 页面，在代码中引用所需的命名空间和服务：

@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@using Microsoft.AspNetCore.Components.QuickGrid
@inject ITeacherService teacherService

这里请确保 ITeacherService 已经被注册：

builder.Services.AddSingleton<ITeacherService, TeacherService>();

接下来我们使用 QuickGrid 组件：

<PageTitle>QuickGrid Example</PageTitle>

<h1>QuickGrid Example</h1>

@if (teachers != null)
{
    <QuickGrid Items="@teachers">
        <PropertyColumn Property="@(p => p.Id)" Sortable="true" IsDefaultSortColumn="true" Title="ID" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" Title="Name" />
        <PropertyColumn Property="@(p => p.EntryDate)" Format="yyyy-MM-dd" Sortable="true" Title="Entry Date" />
    </QuickGrid>
}
else
{
    <p>Loading...</p>
}

在上面的代码中，我们使用了 QuickGrid 组件来展示教师信息。QuickGrid的 Items 属性绑定到了我们定义的IQueryable类型的 teachers 变量。我们使用 PropertyColumn来指定要展示的属性和相关的设置。

在 PropertyColumn 中，我们设置了以下属性：
Property：指定要展示的属性，这里使用了 Lambda 语法指定了对象的属性。
Sortable：指定该列是否可排序。
IsDefaultSortColumn：指定是否将该列设置为默认排序列。
Title：指定该列的标题。
Format：指定日期类型属性的格式化字符串，这里将 EntryDate 属性格式化为 "yyyy-MM-dd" 的形式。

在代码块中，我们定义了一个IQueryable类型的teachers变量。在重写的 OnInitializedAsync 方法中，我们调用 teacherService 来异步获取教师数据，并将其转换为IQueryable类型的 teachers 变量。

@code {
    private IQueryable<Teacher> teachers=null;

    protected override async Task OnInitializedAsync()
    {
        var data = await teacherService.GetTeachersAsync();
        teachers = data.AsQueryable();
        await base.OnInitializedAsync();
    }
}

参考资料

ASP.NET Core Blazor QuickGrid 组件

示例代码

QuickGridExample.razor