GridView固定表头

最新推荐文章于 2019-02-21 17:37:00 发布

原创最新推荐文章于 2019-02-21 17:37:00 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#server #button #asp #float #function #xhtml

本文介绍如何在ASP.NET中使用JavaScript和CSS实现GridView滚动时表头固定的效果，并提供两种实现方案：一是通过JavaScript克隆并分离表头，二是采用两个GridView分别管理表头和内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用JS。嵌套两个Div function init() { var bodyGridView = document.getElementById("<%=GridView1.ClientID%>"); var headGridView = bodyGridView.cloneNode(true); for(i = headGridView.rows.length -1;i > 0;i--) { headGridView.deleteRow(i) ; } bodyGridView.deleteRow(0) ; headdiv.appendChild(headGridView) ; } window.onload=init; </script>

利用CSS

1.首先这样的方式不是标准的CSS语法，然而打开WebForm的时候，aspx里面都会加入一行來检查是否是标准的格式，有这行会失败，必须删除此行。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.其次，由於GridView所在的HTML会加入div，导致CSS

this.parentElement.offsetParent.parentElement.scrollLeft

取错，修正为

this.parentElement.offsetParent.offsetParent.scrollLeft

设定HeadStyle的CssClass=FixedTitleColumn，以及ItemStyle的CssClass=FixedDataColumn

整个GridView的HeadStyle設定CssClass=FixedTitleRow

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.FixedTitleRow { position: relative; table-layout:fixed; top: expression(this.offsetParent.scrollTop-2); z-index: 10; } .FixedTitleRow th { text-overflow:ellipsis; overflow:hidden; white-space: nowrap; padding:2px; }</style> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div style="width: 600px; height: 400px; overflow: scroll; z-index: 100;"> <asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" runat="server" AutoGenerateColumns="False" BorderColor="black" Font-Size="12px" DataKeyNames="Code,Name"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" /> </ItemTemplate> <HeaderStyle Width="50px" /> <ItemStyle Width="50px" /> </asp:TemplateField> </Columns> <RowStyle HorizontalAlign="Center" /> <PagerStyle HorizontalAlign="Center" /> <HeaderStyle BackColor="Azure" CssClass="FixedTitleRow" HorizontalAlign="Center" /> </asp:GridView> </div> </form> </body> </html>

针对采用CSS的方法火狐等浏览器不支持，还需判断且效果不是很好。然而使用JS的这种方法客户端再去取值时却取不到，因为被for给删除了哦~_~,再扩展，应该可以，但没做到！正对JS的方法如下 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> </style> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div id="body" style="position: absolute; width: 630px;"> <div id="headdiv" style="top: 0.5px; text-align: center; position: absolute; float: left; width: 630px; height: 21px; word-wrap: break-word; overflow: hidden;">  </div> <div id="bodydiv" style="top: 19.5px; float: left; overflow: auto; position: absolute; width: 647px; height: 350px;" onscroll="headdiv.scrollLeft=scrollLeft">   <asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" runat="server" AutoGenerateColumns="False" Font-Size="12px" DataKeyNames="Code,Name"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" /> </ItemTemplate> <HeaderStyle Width="50px" /> <ItemStyle Width="50px" /> </asp:TemplateField> </Columns> <RowStyle HorizontalAlign="Center" /> <PagerStyle HorizontalAlign="Center" /> <HeaderStyle Font-Bold="True" ForeColor="Black" Font-Size="12px" HorizontalAlign="Center" /> </asp:GridView> </div> <div id="btnDiv" style=";float: right; margin-top: 380px;" mce_style=";float: right; margin-top: 380px;"> <asp:CheckBox ID="CheckBox2" runat="server" CssClass="button" OnCheckedChanged="CheckBox2_CheckedChanged" Text="全选" AutoPostBack="True" /> <asp:Button ID="btnOK" runat="server" Text="确定" CssClass="button" OnClientClick="return Commit();" /> <asp:Button ID="btnCancel" runat="server" Text="取消" CssClass="button" OnClientClick="return Cancel();" /> </div> </div> </form> </body> </html>

后台代码简单绑定数据源就OK了！

但这两种目前还不满足需求，如上，还需取到客户端值怎么办，避免浏览器的更换。呵呵，采取了两个GridView的方法（事后想起来其实方法很多），gridView1专门负责表头，gridview2负责表体（这点样式控制比较麻烦哦！)思路很简单哦！不说了，直接看代码！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %> <%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --%> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>通用选择模块</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> *{FONT-SIZE: 12px;} .button { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid; } </style> <mce:script language="javascript" type="text/javascript"></mce:script> <base target="_self" /> </head> <body> <form id="form1" runat="server" method="post"> <div id="bodydiv" style="width: 650px;"> <div id="headdiv" style="top: 1px; position: absolute; float: left; width: 650px; height: 25px; word-wrap: break-word; overflow: hidden;"> <asp:GridView ID="gdview" runat="server" AutoGenerateColumns="false" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound"> <HeaderStyle Width="100px" /> </asp:GridView> </div> <div id="gvbodydiv" style="top: 20px; float: left; overflow: auto; position: absolute; width: 650px; height: 320px;" onscroll="headdiv.scrollLeft=scrollLeft"> <asp:GridView ID="GridView2" runat="server" ShowHeader="False" OnRowDataBound="GridView2_RowDataBound" AllowSorting="True"> <RowStyle HorizontalAlign="Center" VerticalAlign="Middle" /> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> <HeaderStyle Width="100px" /> </asp:GridView> </div> <div id="btnDiv" style="float: right; margin-top: 370px;" mce_style="float: right; margin-top: 370px;"> <asp:CheckBox ID="CheckBoxAll" runat="server" CssClass="button" onclick="checkAll()" Text="全选" /> <asp:Button ID="btnOK" runat="server" Text="确定" CssClass="button" OnClientClick="return Commit();" /> <asp:Button ID="btnCancel" runat="server" Text="取消" CssClass="button" OnClientClick="return Cancel();" /> </div> </div> </form> </body> </html>

后台代码较简单须判定样式，代码简单不说了！在这里提个思路！

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { e.Row.Cells[0].Attributes.Add("style", "width:70px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[1].Attributes.Add("style", "width:80px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[2].Attributes.Add("style", "width:150px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[3].Attributes.Add("style", "width:165px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[4].Attributes.Add("style", "width:182px;word-wrap : break-word ;word-break : normal ;"); } } protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { if (myView.Count >= 14) { e.Row.Cells[0].Attributes.Add("style", "width:70px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[1].Attributes.Add("style", "width:79px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[2].Attributes.Add("style", "width:151px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[3].Attributes.Add("style", "width:165px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[4].Attributes.Add("style", "width:165px;word-wrap : break-word ;word-break : normal ;"); } else { e.Row.Cells[0].Attributes.Add("style", "width:70px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[1].Attributes.Add("style", "width:79px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[2].Attributes.Add("style", "width:149px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[3].Attributes.Add("style", "width:165px;word-wrap : break-word ;word-break : normal ;"); e.Row.Cells[4].Attributes.Add("style", "width:181px;word-wrap : break-word ;word-break : normal ;"); } } }