Keeping Table Header Fixed in MVC

问题:

I have a Table for which I need to keep the header fixed. The code for the table is as below:

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

How to do this? Thanks in advance. :)

回答1:

Grid in MVC will be rendering as normal HTML table (at least in my understanding you are using MVC Grid Nugets like Grid.MVC) on the client side. So you can use any HTML Table Fixed header JQuery plugins to fix the header.

Some options what you have is -

JQuery FreezeHeader in which you can simply have -

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

And some more options are - Fixed Header Table, Sticky Table Headers etc.

回答2:

Don't forget to add

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

;-)