GridView样式及排序问题
回来了,又是一年,公司牛鬼蛇神什么人都有,真是呆不下去了,哎
咳咳咳,正题,正题,最近有一个项目,数据列表要显示为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所在层的高。代码如下
<!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);
table.RenderEndTag(output);
base.HeaderRow.Visible = false;
output.Write("<div style={overflow:auto;height:" + this._gridheight + "}>");
base.RenderContents(output);
output.Write("</div>");
}
好了,现在来看看排序的问题。使用GridView时,GridView控件会自己帮你排好序,但是请注意,
GridView控件支持的是内存排序,不是数据库级的,也就是说,如果你用的是数据库分页,并使用自带的
排序功能的话,得到的结果和你预期的会不同。GridView有两个属性记录了某个字段下一次排序的方向,
分别是SortExpression及SortDirection,可以使用这两个属性的值来进行自己定义排序,但是,不幸的
是,这两个属性的值只有在使用SqlDataSource等数据控件做数据源时,才会被设置。所以,如果你是用
DataSet的话,这两个属性的值是不会被记录的,另外,SortExpression只记录当前所使用的排序列,
SortDirection记录下次当前排序列的排序方向。于是我改写了GridView的OnSorting方法,并外放了一个
只读的Dictionary类型的字段SortExpreAndDirec此字段记录所有已排序字段的名称及方向的键值对,
特殊的是,这个属性记录得是排序列当前的排序方向。详情请见所附代码,希望对大家有所帮助。
posted on 2010-01-22 10:19 我不是冷狐冲,我就是一酒壶 阅读(1920) 评论(1) 编辑 收藏 举报