
在用GridView自带的排序功能排序时,无法直观的知道当前是通过哪个字段排序?是升序还是降序?所以扩展一下,用图片或文字的形式来提示一下当前是根据哪个字段排序,是升序还是降序。
控件开发
1、新建一个继承自GridView的类。
/// <summary>
/// 继承自GridView
/// </summary>
[
ToolboxData(
@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>"),
ParseChildren(
true),
PersistChildren(
false)
]
public
class SmartGridView : GridView
{
}










2、新建一个SortTip实体类,有4个属性,分别是降序提示图片、升序提示图片、降序提示文本和升序提示文本


























































































3、在继承自GridView的那个类中加1个复杂对象属性,这个复杂对象就是第2步创建的那个SortTip





















4、重写OnRowDataBound实现给字段标题加上排序状态的功能。主要是根据GridView.SortExpression和GridView.SortDirection来实现这样的功能。
/// <summary>
/// OnRowDataBound
/// </summary>
/// <param name="e"></param>
protected
override
void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
// GridViewRow的每个TableCell
for (
int i = 0; i < e.Row.Cells.Count; i++)
{
// TableCell里有一个Control并且是LinkButton
if (e.Row.Cells[i].Controls.Count == 1 && e.Row.Cells[i].Controls[0]
is LinkButton)
{
// LinkButton的命令参数等于排序字段
if (((LinkButton)e.Row.Cells[i].Controls[0]).CommandArgument ==
this.SortExpression)
{
Image img =
null;
Label lbl =
null;
// 升序
if (
this.SortDirection == SortDirection.Ascending)
{
// 升序图片
if (!String.IsNullOrEmpty(_sortTip.SortAscImage))
{
img =
new Image();
img.ImageUrl =
base.ResolveUrl(_sortTip.SortAscImage);
}
// 升序文字
if (!String.IsNullOrEmpty(_sortTip.SortAscText))
{
lbl =
new Label();
lbl.Text = _sortTip.SortAscText;
}
}
// 降序
else
if (
this.SortDirection == SortDirection.Descending)
{
// 降序图片
if (!String.IsNullOrEmpty(_sortTip.SortDescImage))
{
img =
new Image();
img.ImageUrl =
base.ResolveUrl(_sortTip.SortDescImage);
}
// 降序文字
if (!String.IsNullOrEmpty(_sortTip.SortDescText))
{
lbl =
new Label();
lbl.Text = _sortTip.SortDescText;
}
}
// TableCell里加上图片
if (img !=
null)
{
e.Row.Cells[i].Controls.Add(img);
}
// TableCell里加上文字
if (lbl !=
null)
{
e.Row.Cells[i].Controls.Add(lbl);
}
}
}
}
}
base.OnRowDataBound(e);
}





































































控件使用
添加这个控件到工具箱里,然后拖拽到webform上,设置其SortTip下的4个属性即可。SortAscImage是升序提示图片;SortAscText是升序提示文本;SortDescImage是降序提示图片;SortDescText是降序提示文本
ObjData.cs
添加这个控件到工具箱里,然后拖拽到webform上,设置其SortTip下的4个属性即可。SortAscImage是升序提示图片;SortAscText是升序提示文本;SortDescImage是降序提示图片;SortDescText是降序提示文本
ObjData.cs















/// <summary>
/// OjbData 的摘要说明
/// </summary>




























Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<yyc:SmartGridView ID="SmartGridView1" runat="server" AutoGenerateColumns="True"
AllowSorting="True" DataSourceID="ObjectDataSource1">
<Columns>
<asp:ButtonField CommandName="ConfirmTest" Text="确认按钮测试" />
</Columns>
<SortTip SortAscImage="~/Images/asc.gif" SortDescImage="~/Images/desc.gif" />
</yyc:SmartGridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"
TypeName="OjbData"></asp:ObjectDataSource>
</div>
</form>
</body>
</html>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<yyc:SmartGridView ID="SmartGridView1" runat="server" AutoGenerateColumns="True"
AllowSorting="True" DataSourceID="ObjectDataSource1">
<Columns>
<asp:ButtonField CommandName="ConfirmTest" Text="确认按钮测试" />
</Columns>
<SortTip SortAscImage="~/Images/asc.gif" SortDescImage="~/Images/desc.gif" />
</yyc:SmartGridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"
TypeName="OjbData"></asp:ObjectDataSource>
</div>
</form>
</body>
</html>

OK
[×××]
转载于:https://blog.51cto.com/webabcd/345445