如何向 Blazorise DataGrid 添加粘性标题？答案

【问题标题】：How do you add sticky headers to Blazorise DataGrid?如何向 Blazorise DataGrid 添加粘性标题？
【发布时间】：2020-08-04 00:18:48
【问题描述】：

最近，我有一个请求，希望在我的一个 Blazor 服务器项目中将 Sticky Header 功能添加到 DataGrid。我正在使用 Blazorise，没有看到任何现有的粘性标题功能，并且在网上找到了有限的信息，所以我想我会记录我的解决方案。

【问题讨论】：

标签： datagrid blazor blazorise

【解决方案1】：

我将在我的回答开始前说明这个解决方案是为 chrome 构建的，可能需要针对不同的浏览器进行调整。

首先，我在我的 site.css 文件中添加了一个sticky-header 类：

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

    .sticky-header::before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background-color: #fcfcfc;
        z-index: -1;
    }

    .sticky-header + .sticky-header::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -1px;
        background-color: #fcfcfc;
        z-index: -1;
    }

关于 CSS 的几点说明。 top 设置为 0 以将标题设置到屏幕顶部，z-index 只需设置为比周围元素更高的索引，以便它保持在其他元素的前面。

此外，我注意到position: sticky 摆脱了我的边界，因此我使用了::before 和::after 伪类来帮助充当内部边界，但这部分代码并不是必须的粘头工作。

一旦你有了上面的 css，你就会想把它添加到你的 DataGrid 中。对于您在 DataGridColumns 部分中定义的每个 DataGridColumn，您需要添加以下代码：

<DataGrid>
   <DataGridColumns>
      <DataGridColumn HeaderCellClass="sticky-header" TItem="TEntity" Field="@nameof(TEntity.SomeProperty)" Caption="Some Caption" />
   </DataGridColumns>
</DataGrid>

【讨论】：

我猜那个 Sticky headers 意味着你有滚动条。你做到了吗？我的数据网格无法显示滚动条
它对某人有用吗？我添加了它，但它什么也没做。