如何冻结 Kendo MVC Grid 中的列标题？答案

【问题标题】：How to freeze column header in KendoMVC Grid?如何冻结 Kendo MVC Grid 中的列标题？
【发布时间】：2014-07-23 12:25:59
【问题描述】：

我有 kendo MVC Grid，我必须将我的页面大小设置为 50，所以我需要在滚动时冻结列标题。

问题是：如何在滚动时冻结列标题？

【问题讨论】：

【解决方案1】：

创建网格时，您应该以像素为单位定义height，并将scrollable 定义为true。

例子：

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    scrollable: true,
    height    : "150px",
    columns   : [
        ...
    ]
});

【讨论】：

【解决方案2】：

也许这是您正在寻找的东西：

效果很好，您不必在网格中使用滚动条，这样更容易使用。

您只需将提供的脚本链接到您的视图并在加载时调用此方法：

$('#grid').stickyTableHeaders({
    cacheHeaderHeight: true,
    leftOffset: 1,
    fixedOffset: ...
});

参数是可选的，但 cacheHeaderHeight 提高了性能，我不得不添加 leftOffset 因为自定义网格标题边框和 fixedOffset 因为其他粘性元素。

【讨论】：

【解决方案3】：

已经为 kendo UI 给出了这个答案，但这里是它在 kendo MVC 中的实现方式：

.Scrollable(scr => scr.Height(400))

它会给你一个垂直滚动条，允许用户滚动数据，同时不断地看到表格的页眉和页脚。你可以在这里阅读更多信息：https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview。

然而，这个解决方案的问题在于，即使只有一行数据，网格也会有 400 像素高。你可以这样解决这个问题

.Scrollable(scr =>
{
    if (data.Count() < 10)
    {
        scr.Height("auto");
    }
    else
    {
        scr.Height(400);
    }
})

【讨论】：

【解决方案4】：

只需像这样设置网格标题的css：

.k-grid-header {
   position: sticky;
   top: 0;
}

【讨论】：