Blazor QuickGrid 无法正确显示

问题描述 投票:0回答:1

使用 Blazor QuickGrid,标记为可排序的列标题显示为灰色按钮,而不是可点击的文本。关于可能出什么问题的任何想法吗? 截图

我尝试从页面中删除 CSS,看看是否存在某种渲染问题。

c# asp.net blazor quickgrid
1个回答
0
投票

这是一个您可以遵循的工作演示:

1.安装包Microsoft.AspNetCore.Components.QuickGrid.

2.在组件中设置QuickGrid

@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

3.在

App.razor

中添加CSS样式
<head>
    //other css...
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link href="_content/Microsoft.AspNetCore.Components.QuickGrid/QuickGrid.min.css" rel="stylesheet" />

</head>

注意

使用浏览器的开发人员工具检查为 QuickGrid 生成的 HTML。检查列标题是否应用了预期的类和样式。这可以帮助您确定是否存在 CSS 冲突或样式是否丢失。

如果您有自定义 CSS,请确保没有影响 QuickGrid 样式的冲突。

© www.soinside.com 2019 - 2024. All rights reserved.