.Net GridView 系列:ASP.NET C# GridView 通用样式及动态页尺寸、通用页脚处理
好久没有写东东了，今天是平安夜，记录些吧。
前段时间将奚江华老师的书读了一遍，非常有感触，尤其是对Ajax部分很感兴趣，也碰了不少钉子，终于将区域选择的部分写成了用户控件（先前是直接调用，代码维护量大也刷页面；后来借鉴于动易的方式用IFrame处理，再修改为后台Ajax动态获取，但由于使用同一Cookie记录信息则造成了同时操作的冲突，现为用户控件，但放置在DetailsView中无法实现部分刷新，故同时刷父级控件了，也属无奈）也由此将PSP项目再次重翻新一遍，将母模板中加入了ajax的支持，拆分了两个大类为十多个目的清晰的小类，将界面尽量同一化管理，做的还不够彻底，还需继续努力。
今天要记录的是GridView的统一样式处理和动态页尺寸、通用页脚的处理。
工作环境：XP SP2 + Microsoft Visual Studio 2005 C#
首先，需建立GridView中使用的CSS样式
摘录如下：
/*GridView Style*/
/*表格边框*/
.GVTab, .GVTab tr, .GVTab th, .GVTab td
{
border: 1px #bbddff Solid;
}
/*表头*/
.GVTab th
{
background-color: #E6E6FF;
color: Navy;
height: 28px;
text-align: center;
vertical-align: middle;
font-size: 14px;
padding: 4px 4px 4px 4px;
}
/*单元格*/
.GVTab td, .GVTab td.c
{
height: 26px;
padding: 4px 4px 4px 4px;
}
.GVTab td
{
text-align: left;
}
/*单元·居中*/
.GVTab td.c
{
text-align: center;
}
/*偶数行*/
.GVTab tr.alt
{
background-color: #F6F6F6;
color: #000040;
}
/*页脚单元*/
.GVPager td
{
background-color: #E0E0E0;
height: 26px;
border: 0; /*text-align: right; color: Navy; font-size: 14px; font-weight: 800;text-decoration: underline;*/
vertical-align: middle;
padding: 0 5px 0 5px;
}
.GVPager td.l
{
text-align:left;
}
.GVPager td.c
{
text-align:center;
}
.GVPager td.r
{
text-align:right;
}
.GVPager a
{
text-decoration: none;
margin-left: 4px;
margin-right: 4px;
}
.GVPager a.b
{
text-decoration:underline;
font-weight: 800;
}
/*记录未找到的图标*/
.nr
{
border: 0;
background: url("img/NoRecord.gif" ) no-repeat center center;
height: 64px;
width: 64px;
}
其次，Themes中的*.Skin是个好东东，可统一规范控件的部分信息，在skin文件中设置通用的GV样式，摘录如下：
<%--通用GridView样式--%>
<asp:GridView runat="server" AutoGenerateColumns="False" AllowPaging="True"
CellPadding="0" AllowSorting="True" PageSize="2" Width="100%" CssClass="GVTab">
<PagerSettings FirstPageText="首页" LastPageText="尾页" Mode="NumericFirstLast" NextPageText="下一页"
PageButtonCount="3" PreviousPageText="上一页" />
<PagerStyle CssClass="GVPager" />
<AlternatingRowStyle CssClass="alt" />
<EmptyDataTemplate>
<table><tr><td><div class="nr" /></td><td style="border:0;"><h3>抱歉，没有检索到相关记录信息！</h3></td></tr></table>
</EmptyDataTemplate>
<PagerTemplate>
<asp:Panel ID="PPage" runat="server"></asp:Panel><%--页脚模板的容器--%>
</PagerTemplate>
</asp:GridView>
然后，建立页脚处理的函数，如下
/// <summary>
/// 通过GridView在RowCreated事件中的调用实现统一通用的页脚样式及功能
/// 注，通用样式中必须包含<PagerTemplate><asp:Panel ID="PPage" runat="server"></asp:Panel></PagerTemplate>
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
static public void GVPageSetting(object sender, GridViewRowEventArgs e)
{
GridViewRow gvr = e.Row;
GridView gv = (GridView)sender;
if (gvr.RowType == DataControlRowType.Pager)
{
Panel PPager = (Panel)gvr.FindControl("PPage");
if (PPager != null)
{
//由于Post网页时asp.net会先重构网页，故此处理将会被前后处理两次，为节省资源，创建控件进行校验 - 无法实现，暂放！
PPager.Controls.Clear();
int iPageButtonCount = gv.PagerSettings.PageButtonCount;
int iPageCount = gv.PageCount;
int iPageIndex = gv.PageIndex + 1;
int i;
Table tab = new Table();
TableRow tr = new TableRow();
TableCell tc;
tab.CssClass = "w100";
//设置页码尺寸部分
tc = new TableCell();
tc.CssClass = "l";
Literal LContext = new Literal();
LContext.Text = "每页显示";
tc.Controls.Add(LContext);
LinkButton LBPageSize;
for (i = 5; i <= 20; i += 5)
{
LBPageSize = new LinkButton();
LBPageSize.Text = i.ToString();
LBPageSize.CommandArgument = LBPageSize.Text;
LBPageSize.Enabled = (LBPageSize.Text != gv.PageSize.ToString());
LBPageSize.CssClass = "b";
LBPageSize.Click += new EventHandler(CD.Controls.GVSetPageSize);
tc.Controls.Add(LBPageSize);
}
LContext = new Literal();
LContext.Text = "条记录";
tc.Controls.Add(LContext);
tr.Cells.Add(tc);
tc = new TableCell();
tc.CssClass = "c";
LContext = new Literal();
LContext.Text = "这是第<b>" + iPageIndex.ToString() + "</b>页/共<b>" + iPageCount.ToString() + "</b>页";
tc.Controls.Add(LContext);
tr.Cells.Add(tc);
tc = new TableCell();
tc.CssClass = "r";
LinkButton LBOP;
//首页
LBOP = new LinkButton(); LBOP.CommandName = "Page"; LBOP.CommandArgument = "First";
LBOP.Text = "首页"; LBOP.Enabled = (iPageIndex > 1); tc.Controls.Add(LBOP);
//上一页
LBOP = new LinkButton(); LBOP.CommandName = "Page"; LBOP.CommandArgument = "Prev";
LBOP.Text = "上一页"; LBOP.Enabled = (iPageIndex > 1); tc.Controls.Add(LBOP);
//页码
int iStartPage = iPageIndex - (iPageButtonCount / 2);
int iEndPage = iStartPage + iPageButtonCount - 1;
if (iStartPage < 1) { iStartPage = 1; iEndPage = iPageButtonCount; }
if (iEndPage > iPageCount) { iEndPage = iPageCount; iStartPage = iEndPage - iPageButtonCount + 1; if (iStartPage < 1) iStartPage = 1; }
for (i = iStartPage; i <= iEndPage; i++)
{
LinkButton LBPager = new LinkButton();
LBPager.ID = "LBP" + i.ToString();
LBPager.Text = i.ToString();
LBPager.CommandName = "Page";
LBPager.CommandArgument = i.ToString();
LBPager.Enabled = (i != iPageIndex);
LBPager.CssClass = "b";
tc.Controls.Add(LBPager);
}
//下一页
LBOP = new LinkButton(); LBOP.CommandName = "Page"; LBOP.CommandArgument = "Next";
LBOP.Text = "下一页"; LBOP.Enabled = (iPageIndex < iPageCount); tc.Controls.Add(LBOP);
//尾页
LBOP = new LinkButton(); LBOP.CommandName = "Page"; LBOP.CommandArgument = "Last";
LBOP.Text = "尾页"; LBOP.Enabled = (iPageIndex < iPageCount); tc.Controls.Add(LBOP);
tr.Cells.Add(tc);
tab.Rows.Add(tr);
PPager.Controls.Add(tab);
}
}
}
/// <summary>
/// 通过对动态创建的页记录条数显示的linkbutton的点击，转入此函数处理，实现上级Gridview控件的页记录条数的动态调整
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
static public void GVSetPageSize(object sender, EventArgs e)
{
if (CD.DataClass.ObjIsNotNull(sender))
{
Control CGridView = ((LinkButton)sender).Parent;
while (CGridView != null && CGridView.GetType().Name.ToLower() != "gridview") CGridView = CGridView.Parent;
if (CGridView != null && CGridView.GetType().Name.ToLower() == "gridview")
{
int iPageSize = CD.DataClass.Str2Int(((LinkButton)sender).CommandArgument);
if (iPageSize > 0) ((GridView)CGridView).PageSize = iPageSize;
}
}
}
最后挂接到使用GridView控件的RowCreated事件中去即可：
protected void GVInfo_RowCreated(object sender, GridViewRowEventArgs e)
{
CD.Controls.GVPageSetting(sender, e);
}
费了一天的功夫搞定的，有些简陋，截图如下：
GridView样式
Pager image (jpg)
Pager image native (Fireworks PNG)
Header image (jpg)
Header image native (Fireworks PNG)
Header image - left side (jpg)
Header image - Hover (jpg)