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

最新推荐文章于 2024-06-12 15:05:05 发布

原创最新推荐文章于 2024-06-12 15:05:05 发布 · 479 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何从零开始学习GridView控件，包括基础属性设置、自定义样式、分页功能实现及添加序号列等步骤。通过实践操作和代码示例，读者可以逐步掌握GridView的使用技巧，最终实现高效的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，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="序号" >
                        <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的一些基础外观就设置完成了。