回来了，又是一年，公司牛鬼蛇神什么人都有，真是呆不下去了，哎
咳咳咳，正题，正题，最近有一个项目，数据列表要显示为header不动，但列表值要有竖的滚动条那
种。控件嘛，自然还是选GridView，基于Framework 2.0，采用的是sqlserver 2000的pubs数据库，今天
就说说这个样式及GridView排序的小问题。
最终想要的样式如下图 
大家可以看到，当一页数据过多时，控件会出现下拉滚动条，要实现这种效果，有两种方式，一种是
用javascript来实现，一种是自定义控件来实现这个功能。但不管是哪种方式,实现的方式都是将GridView
放到一个层里，并将层的style设置如下overflow:auto，将GridView的头隐去，并将HTML代码复
制出来，在另一个层里显示。
先说说javascript脚本的方式。在页面body的onload事件里，取到GridView生成的Table，并将Table
克隆到一个新的对象里，再去掉除了header以外的行，最后将GridView的header隐去，并将新对象显示在
GridView上方的层，设置GridView所在层的高。代码如下
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScriptGridViewStyle.aspx.cs" Inherits="GridViewForm.ScriptGridViewStyle" %><!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>
<script language="javascript" type="text/javascript">
function showHeader() {
var ele = document.getElementById("<%=GridView1.ClientID%>"); //取得GridView生成Table的ID
var table = ele.cloneNode(ele); //clone Table的无素
var count = table.rows.length; //取得Table的行数
for (var i = 1; i < count; i++) { //删除表格行，只保存表头，即header
table.deleteRow(1);
}
var header = document.getElementById("header");
header.appendChild(table); //此时table只有header了，将其加到层里
ele.deleteRow(0); //删除原数据表的header
}</script>
</head>
<body onload="showHeader();">
<form id="form1" runat="server">
<table>
<tr>
<td>
<div id="header">
</div>
<div style="overflow:auto;height:200px" >
<asp:GridView ID="GridView1" Width="500px"
AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="Both">
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%"
HeaderText="stor_id" DataField="stor_id" >
<HeaderStyle Width="5%"></HeaderStyle><ItemStyle Width="5%"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%"
HeaderText="ord_num" DataField="ord_num">
<HeaderStyle Width="5%"></HeaderStyle><ItemStyle Width="5%"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%" HeaderText="qty"
DataField="qty" >
<HeaderStyle Width="5%"></HeaderStyle><ItemStyle Width="5%"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderStyle-Width="5%" ItemStyle-Width="5%"
HeaderText="title_id" DataField="title_id" >
<HeaderStyle Width="5%"></HeaderStyle><ItemStyle Width="5%"></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
再来说说自定义控件的方式。建立自定义控件，继承GridView，重写RenderContents方法，将
GridView的header在一个新的层里render一下，并将GridView的HeaderRow的Visible属性设置为false，
同时控件外放一个属性来设置GridView所在层的高度。代码如下（附自定义控件的原代码 ）
代码
/// <summary>
/// 重写rendercontents方法
/// 如设置了GridHeight属性，超出显示高度会出现滚动条
/// </summary>
/// <param name="output">HTML输出</param>
protected override void RenderContents(HtmlTextWriter output)
{
if (this.ShowHeader && this._gridheight != String.Empty && this.Rows.Count > 0)
{
RenderGrid(output);
}
else
{
base.RenderContents(output);
}
}/// <summary>
/// 显示层数据
/// </summary>
/// <param name="output">HTML输出</param>
private void RenderGrid(HtmlTextWriter output)
{
Table table
= new Table();table.MergeStyle(
base.ControlStyle);table.RenderBeginTag(output);
base.HeaderRow.RenderControl(output);}
好了，现在来看看排序的问题。使用GridView时，GridView控件会自己帮你排好序，但是请注意，
GridView控件支持的是内存排序，不是数据库级的，也就是说，如果你用的是数据库分页，并使用自带的
排序功能的话，得到的结果和你预期的会不同。GridView有两个属性记录了某个字段下一次排序的方向，
分别是SortExpression及SortDirection，可以使用这两个属性的值来进行自己定义排序，但是，不幸的
是，这两个属性的值只有在使用SqlDataSource等数据控件做数据源时，才会被设置。所以，如果你是用
DataSet的话，这两个属性的值是不会被记录的，另外，SortExpression只记录当前所使用的排序列，
SortDirection记录下次当前排序列的排序方向。于是我改写了GridView的OnSorting方法，并外放了一个
只读的Dictionary类型的字段SortExpreAndDirec此字段记录所有已排序字段的名称及方向的键值对，
特殊的是，这个属性记录得是排序列当前的排序方向。详情请见所附代码，希望对大家有所帮助。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。