您的位置:首页 > Web前端 > CSS

.Net GridView应用:通用样式及动态页尺寸、通用页脚处理

2012-01-17 14:14 344 查看
前段时间将奚江华老师的书读了一遍,非常有感触,尤其是对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);

}

费了一天的功夫搞定的,有些简陋,截图如下:



继续努力吧!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: