在MVC中保持表头固定

Question

我有一个表，我需要保持标题固定。该表的代码如下：

@Html.Grid(Model).Columns(column =>
{
     column.For(m => m.Id).Attributes(@class => "HideColumn").HeaderAttributes(@class => "HideHeader");                                   
     column.For(m => m.HolidayName).Named("Holiday Name").Attributes(@style => "width:300px;");
     column.For(m => m.HolidayDetails).Named("Holiday Details ").Attributes(@style => "width:300px;");
     column.For(m => m.Status).Named("Status").Attributes(@style => "width:200px;"); 
}

该怎么做呢？提前谢谢。:)

Answer 1

在客户端，网格将呈现为普通的超文本标记语言表格(至少在我的理解中，你使用的是像Grid.MVC这样的MVC Grid Nuget)。所以你可以使用任何HTML Table的固定标题JQuery插件来固定标题。

你可以选择的是-

JQuery FreezeHeader，其中您可以简单地拥有-

 $(document).ready(function () {
            $("#tableid").freezeHeader();
        })

一些更多的选项是- Fixed Header Table，Sticky Table Headers等。

Answer 2

您可以在script部分中使用以下代码：

  $(document).ready(function () {
                $('#yourTableId').floatThead({
                    top: $('.topbar').height(),
                    autoReflow: true,
                    zIndex: 1
                });
    });

Answer 3

别忘了添加

<script src="/path/to/jquery.freezeheader.js"></script>

;-)