GradView基础样式设计、分页、序号列

首先，GradView 72绝技在博客上很出名，但对于新手的我来说显得过于高大上，很多功能现在用不上也有点难以掌握。

但从.Net平台拖拉控件开始，进入到GradView的初级阶段还是很容易的。

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>

别人给我演示了下拖拉控件，并设置了下GridView的一些属性，就有了以上代码，有帮我完善了下后台代码，就很轻松的了解了GridView到底是一个怎样的控件，到底是一种怎样的展示方法。

public void bind()
    {
        this.GridView1.DataSource = SqlHelper.ExecuteDataset(strsql);   //所要展示的内容，用SQl写
        this.GridView1.DataBind();
    }

别人的东西始终是别人的，别人能够很轻松的通过拖拉、设置、几句后台代码就能展示数据，是别人经验的积累和对知识的融会贯通。别人的东西始终是别人的，只有自己真正去研究去掌握才是属于自己的。然后，我就在此基础上开始我的GridView学习。

诚然，GridView自带的属性都很强大，能够通过基础属性的设置就能呈现一个不错的外观，但还是比较习惯Css的设置。

<asp:GridView ID="GridView1" runat="server" CssClass="GridViewStyle">
                <AlternatingRowStyle CssClass="AlternatingRowStyle" /> <%--交替数据行--%>
                <HeaderStyle CssClass="HeaderStyle" />  <%--标题行--%>
                <RowStyle CssClass="RowStyle" /> <%--数据行--%>
                <SelectedRowStyle CssClass="SelectedRowStyle"/>  <%--选中行--%>
            </asp:GridView><span style="font-family: Arial, Helvetica, sans-serif;"></span>

Css设置的样式如下：

<style type="text/css">
/*GradView begin*/
.GridViewStyle{border: 1px solid #ccc;border-collapse: collapse;padding: 2px;width: 100%;margin-bottom: 5px;
font-size:12px;font-family: 宋体, Arial, Helvetica, Verdana, sans-serif;
}
.HeaderStyle {line-height: 28px;color: #fff;background: #486197 url(images1/th_bg.jpg) repeat-x center center;}
.RowStyle {border: 1px solid #ccc;border-collapse: collapse;padding: 2px;line-height:28px;}
.AlternatingRowStyle {border: 1px solid #ccc;border-collapse: collapse;padding: 2px;line-height:28px;}
</style>

通过Css样式的编写及修改，感觉对外观的设计更得心应手一些。

做完了基础样式的设置之后，数据能够呈现了，外观也能入眼，就开始考虑GridView的分页问题了。

感谢互联网，感谢高手的无私分享，在网上找到了分页的模板，并将其运用进来。

前端：（PagerTemplate模板页里的注释也是那位大神写的）

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="30" CssClass="GridViewStyle"
OnPageIndexChanging="GridView1_PageIndexChanging">
<AlternatingRowStyle CssClass="AlternatingRowStyle" /> <%--交替数据行--%>
<HeaderStyle CssClass="HeaderStyle" />  <%--标题行--%>
<RowStyle CssClass="RowStyle" HorizontalAlign="Center" /> <%--数据行--%>
<SelectedRowStyle CssClass="SelectedRowStyle"/>  <%--选中行--%>
<PagerTemplate>
当前第:
<!--((GridView)Container.NamingContainer)就是为了得到当前的控件-->
<asp:Label ID="LabelCurrentPage" runat="server" Text="<%# ((GridView)Container.NamingContainer).PageIndex + 1 %>"></asp:Label>
页/共:
<!--得到分页页面的总数-->
<asp:Label ID="LabelPageCount" runat="server" Text="<%# ((GridView)Container.NamingContainer).PageCount %>"></asp:Label>
页
<!--如果该分页是首分页，那么该连接就不会显示了.同时对应了自带识别的命令参数CommandArgument-->
<asp:LinkButton ID="LinkButtonFirstPage" runat="server" CommandArgument="First" CommandName="Page"
Visible='<%#((GridView)Container.NamingContainer).PageIndex != 0 %>'>首页</asp:LinkButton>
<asp:LinkButton ID="LinkButtonPreviousPage" runat="server" CommandArgument="Prev"
CommandName="Page" Visible='<%# ((GridView)Container.NamingContainer).PageIndex != 0 %>'>上一页</asp:LinkButton>
<!--如果该分页是尾页，那么该连接就不会显示了-->
<asp:LinkButton ID="LinkButtonNextPage" runat="server" CommandArgument="Next" CommandName="Page"
Visible='<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>'>下一页</asp:LinkButton>
<asp:LinkButton ID="LinkButtonLastPage" runat="server" CommandArgument="Last" CommandName="Page"
Visible='<%# ((GridView)Container.NamingContainer).PageIndex != ((GridView)Container.NamingContainer).PageCount - 1 %>'>尾页</asp:LinkButton>
转到第
<asp:TextBox ID="txtNewPageIndex" runat="server" Width="20px" Text='<%# ((GridView)Container.Parent.Parent).PageIndex + 1 %>' />页
<!--这里将CommandArgument即使点击该按钮e.newIndex 值为3 -->
<asp:LinkButton ID="btnGo" runat="server" CausesValidation="False" CommandArgument="-2"
CommandName="Page" Text="GO" />
</PagerTemplate>
</asp:GridView>

而后台则是：

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
// 得到该控件
GridView theGrid = sender as GridView;
int newPageIndex = 0;
if (e.NewPageIndex == -3)
{
//点击了Go按钮
TextBox txtNewPageIndex = null;

//GridView较DataGrid提供了更多的API，获取分页块可以使用BottomPagerRow 或者TopPagerRow，当然还增加了HeaderRow和FooterRow
GridViewRow pagerRow = theGrid.BottomPagerRow;

if (pagerRow != null)
{
//得到text控件
txtNewPageIndex = pagerRow.FindControl("txtNewPageIndex") as TextBox;
}
if (txtNewPageIndex != null)
{
//得到索引
newPageIndex = int.Parse(txtNewPageIndex.Text) - 1;
}
}
else
{
//点击了其他的按钮
newPageIndex = e.NewPageIndex;
}
//防止新索引溢出
newPageIndex = newPageIndex < 0 ? 0 : newPageIndex;
newPageIndex = newPageIndex >= theGrid.PageCount ? theGrid.PageCount - 1 : newPageIndex;

//得到新的值
theGrid.PageIndex = newPageIndex;

//重新绑定
bind();
}

大神就是这么的牛，当然网上的资源借鉴过来之后，需要自己进行修改调整一下。

在分页功能也完成之后，开始考虑是否能有个序号列呢。

在GridView的内部，加入以下代码：

<Columns>
<asp:BoundField HeaderText="序号" >

9f61
<ItemStyle CssClass="ItemStyle"/>
<HeaderStyle />
</asp:BoundField>
</Columns>

后台则是：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int indexID = this.GridView1.PageIndex * this.GridView1.PageSize + e.Row.RowIndex + 1;
e.Row.Cells[0].Text = indexID.ToString();
}
}

这样一些GridView的一些基础外观就设置完成了。