在 MVC 中保持表头固定答案

【问题标题】：Keeping Table Header Fixed in MVC在 MVC 中保持表头固定
【发布时间】：2014-03-03 04:37:04
【问题描述】：

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

@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;"); 
}

如何做到这一点？提前致谢。 :)

【问题讨论】：

这个解决方案对您有用吗？我试图在我的 MVC 应用程序中做同样的事情，但插件不起作用。我想知道这是否是我在外滩设置的方式。我只是添加了 .js 文件，然后调用了 .freezeHeader()。我没有包含降级的 CSS，因为我有自己的表格样式。
@Ray 你们能做到这一点吗？像 Ray 我试过但可以让它在 GridMVC 上工作

标签： asp.net-mvc razor-2

【解决方案1】：

您可以在脚本部分使用此代码：

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

【讨论】：

【解决方案2】：

别忘了添加

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

;-)

【讨论】：

【解决方案3】：

MVC 中的网格将在客户端呈现为普通的 HTML 表格（至少在我的理解中，您正在使用像 Grid.MVC 这样的 MVC Grid Nugets）。所以你可以使用任何 HTML Table Fixed header JQuery 插件来修复 header。

你有一些选择 -

JQuery FreezeHeader 在其中你可以简单地拥有 -

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

还有更多选项 - Fixed Header Table、Sticky Table Headers 等。

【讨论】：

我无法让它在 GridMVC 和工作示例上工作