.Net GridView 系列:ASP.NET C# GridView 通用样式及动态页尺寸、通用页脚处理

来源:互联网 发布:c语言wifi驱动的开发 编辑:程序博客网 时间:2024/05/01 18:29

好久没有写东东了,今天是平安夜,记录些吧。

前段时间将奚江华老师的书读了一遍,非常有感触,尤其是对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样式

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="GamerGridView.css" rel="stylesheet" type="text/css" />
Standard GridView declaration:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CssClass="GridViewStyle" DataKeyNames="CustomerID" DataSourceID="ObjectDataSource1"
GridLines="None">
<Columns>
                <!-- Your columns here -->
</Columns>
<FooterStyle CssClass="FooterStyle" />
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>

 

/*GridViewCSS Glass Black Style*/
.GridViewStyle
{
font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 1px solid;
}
/*Header and Pager styles*/
.HeaderStyle
{
background-image: url(Images/HeaderGamer_left.jpg);
background-position:left;
background-repeat:repeat-x;
height:30px;
}
.PagerStyle
{
background-image: url(Images/PagerGamer.jpg);
background-position:top;
background-repeat:repeat-x;
}
.HeaderStyle th
{
padding: 0px;
color: #ffffff;
}
.HeaderStyle a:link, a:visited
{
text-decoration:none;
color:#ffffff;
display:block;
text-align:left;
font-weight:normal;
border-left:solid 1px #666666;
border-right:solid 1px #1d1d1d;
padding-top:25px;
padding-bottom:9px;
padding-right:5px;
padding-left:5px;
background-image: url(Images/HeaderGamer.jpg);
background-position:top;
background-repeat:repeat-x;
}
.HeaderStyle a:hover
{
background-image: url(Images/HeaderGamer_Hover.jpg);
background-position:top;
background-repeat:repeat-x;
}
.PagerStyle table
{
text-align:center;
margin:auto;
}
.PagerStyle table td
{
border:0px;
padding:5px;/*padding around pager numbers */
}
.PagerStyle td
{
border-top: #1d1d1d 1px solid;/*top border of pager*/
height:40px;
}
.PagerStyle a
{
color:#ffffff;
text-decoration:none;
padding:2px 10px 2px 10px;
/*border around pager numbers*/
border-top:solid 1px #777777;
border-right:solid 1px #333333;
border-bottom:solid 1px #333333;
border-left:solid 1px #777777;
}
.PagerStyle span
{
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
padding:2px 10px 2px 10px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
}
.RowStyle td
{
background-color: #333333;
color: #ffffff;
}
.AltRowStyle td
{
background-color: #1d1d1d;
color:#ffffff;
}
.SelectedRowStyle td
{
background-color: #ffff66;
}
And the images:
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)
原创粉丝点击