Implementation of fixed title columns and columns in ASP. NET

APSX Page code: JS

Copy codeThe Code is as follows: <script src = "../javascript/jquery-1.8.3.min.js" type = "text/javascript"> </script>-
<Script src = "./Js/jquery-ui-1.10.3.custom.js" type = "text/javascript"> </script>

<Script src = "../Js/gridviewScroll. min. js" type = "text/javascript"> </script>

<Link href = "../CSS/GridviewScroll.css" rel = "stylesheet" type = "text/css"/>

// All the above files can be downloaded directly from the Internet

<Script type = "text/javascript">

$ (Document). ready (function (){
GridviewScroll ();
});

Function gridviewScroll (){

// Because my GRIDVIEW is to be placed in a DIV, the corresponding height and width should be obtained. Generally, it is better to set the number directly.

Var gridWidth = $ ("# divservic"). width ();
Var gridHeight = $ ("# divservic"). height ();

Var headerHeight = $ ("# divHeader"). height ();

GridHeight = gridHeight-headerHeight;

$ ('# <% = GridView2.ClientID %>'). gridviewScroll ({
Width: gridWidth, // The width must not be 100%.
Height: gridHeight, // The height can be directly written to death.
Freezesize: 4 // The control header does not move
});
}

Copy codeThe Code is as follows: <div id = "divservic" style = "width: 100%; margin-bottom: 2px; height: 220px;">

<Asp: GridView ID = "GridView2" runat = "server" CellPadding = "4" ForeColor = "#333333" Width = "100%"
BorderColor = "# D1DDAA" AllowPaging = "True" DataKeyNames = "InstallationID"
OnPageIndexChanging = "GridView2_PageIndexChanging"
Onrowdatabound = "GridView2_RowDataBound"
Onrowdeleting = "GridView2_RowDeleting" AutoGenerateColumns = "False"
AllowSorting = "True" onsorting = "GridView2_Sorting">
<RowStyle CssClass = "GridviewScrollItem"/> ------------------------------------------------------------- Add a style
<FooterStyle BackColor = "#1C5E55" Font-Bold = "True" ForeColor = "White"/>
<PagerStyle CssClass = "GridviewScrollPager"/> ------------------------------------------------------------- Add a style
<SelectedRowStyle BackColor = "# C5BBAF"/>
<HeaderStyle CssClass = "GridviewScrollHeader"/> ------------------------------------------------------------- Add a style
<EditRowStyle BackColor = "#7C6F57"/>
<AlternatingRowStyle BackColor = "White" BorderColor = "# D1DDAA"/>
<Columns>
<Asp: TemplateField>
<ItemTemplate>
<Asp: CheckBox ID = "ckbitem" runat = "server"/>
</ItemTemplate>

</Asp: TemplateField>
<Asp: BoundField DataField = "InstallationID" HeaderText = "InstallationID"
SortExpression = "InstallationID"/>
<Asp: BoundField DataField = "Completed" HeaderText = "Completed"/>
<Asp: BoundField DataField = "Tid" HeaderText = "Tid"/>
<Asp: BoundField DataField = "Mid" HeaderText = "Mid"/>
<Asp: BoundField DataField = "Bank" HeaderText = "Bank"/>
<Asp: BoundField DataField = "Model" HeaderText = "Model"/>
<Asp: BoundField DataField = "Barcode" HeaderText = "Barcode"/>
<Asp: BoundField DataField = "DateReq" HeaderText = "DateReq"
SortExpression = "DateReq"/>

</Columns>
</Asp: GridView>
</Div>