asp.net学习之GridView

显示表格数据是软件开发中的一个周期性任务。ASP.NET 提供了许多工具来在网格中显示表格数据，例如 GridView 控件。通过使用 GridView 控件，您可以显示、编辑和删除多种不同的数据源（例如数据库、XML 文件和公开数据的业务对象）中的数据。

1. GridView数据绑定基础

    GridView大部份场合下都是用来绑定数据源，进行数据的显示。一般情况下，可以绑定到SqlDataSource控件，DataTable对象，DataView对象..也可以绑定到列表对象。
   GrdiView提供了两种数据方式的绑定：DataSourceID与DataSource
     ● 使用 DataSourceID 属性进行数据绑定，此选项使您能够将 GridView 控件绑定到数据源控件。使用 DataSourceID 属性绑定到数据源时，GridView 控件支持双向数据绑定。除可以使该控件显示返回的数据之外，还可以使它自动支持对绑定数据的更新和删除操作。
     ● 使用 DataSource 属性进行数据绑定，此选项使您能够绑定到包括 ADO.NET 数据集和数据读取器在内的各种对象。此方法需要为所有附加功能（如排序、分页和更新）编写代码。
   GridView会自动为一个布尔类型字段呈现复选框。
例1：GridView绑定到一个List对象中

<script runat=”server”>
public class CartItem{
    private int _id;
    public string _description;

    public int Id{
        get { return _id; }
    }
    public string Description{
        get { return _description; }
    }
    public CartItem(int id,string description){
        _id = id;
        _description = description;
    }
}

public partial class employeeManage_schoolyardPlay : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack){
            List<CartItem> shoppingCart = new List<CartItem>();
            shoppingCart.Add(new CartItem(1, "notebook Computer"));
            shoppingCart.Add(new CartItem(2, "HD Plasma Televsion"));
            shoppingCart.Add(new CartItem(3, "Lava Lamp"));
            GridView2.DataSource = shoppingCart;
            GridView2.DataBind();
        }
}
</script>

<asp:GridView ID="GridView2" runat="server" AllowPaging="True"
            AutoGenerateColumns="False" PageIndex="2">
     <Columns>
            <asp:BoundField DataField="Id" HeaderText="编号 " />
            <asp:BoundField DataField="Description" HeaderText="描述" />
     </Columns>
</asp:GridView> 

 

2. 获取GridView被选中行的信息。

    2.1 GridView有两个属性：一个叫AutoGenerateSelectButton，一个叫DataKeyNames。
          AutoGenerateSelectButton设置为true时，GridView就会出现一个选择键。而DataKeyNames则表示获取或设置一个数组，该数组包含了显示在 GridView 控件中的项的主键字段的名称。当用户点击选择时，就可以取出主键字段的值。取GridView选中的值是通过GridView的SelectedValue属性来实现的。
例2：点击选择获得主键的值

<script runat=”server”>
protected void GridView2_SelectedIndexChanged(object sender, EventArgs e)
{
    Label1.Text = GridView2.SelectedValue.ToString();
}
</script>
<asp:GridView ID="GridView2" runat="server" AllowPaging="True"
            AutoGenerateColumns="False"  
            onselectedindexchanged="GridView2_SelectedIndexChanged"
            AutoGenerateSelectButton=true  DataKeyNames="Id">  <!-- 设置DataKeyName为Id字段 -->
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="编号 " />
                <asp:BoundField DataField="Description" HeaderText="描述" />
            </Columns>
</asp:GridView> 

    当然，如果以上设置DataKeyName为Description，则点击选择后Label显示的为选择行的Description值。
例3:子

<!-- 主GridView,选择一行后，在另一个GridView中显示详细表格 --> 
<asp:GridView id=”grdMovieCategories” DataKeyNames=”Id” 
         DataSourceID=”srcMovieCategories” AutoGenerateSelectButton=”true” SelectedRowStyle-CssClass=”selectedRow” 
         CssClass=”gridView”  Runat=”server” /> 
<!-- 主GridView的DataSource --> 
<asp:SqlDataSource id=”srcMovieCategories” ConnectionString=”<%$ ConnectionStrings:Movies %>” 
         SelectCommand=”SELECT Id, Name FROM MovieCategories” Runat=”server” /> 


<!-- 细表GridView,根据grdMoveCategories表中的ID字段，显示属于该ID的所有电影 --> 
<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” CssClass=”gridView” Runat=”server” /> 
<!-- 细GridView的DataSource --> 
<asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” 
         SelectCommand=”SELECT Title,Director FROM Movies WHERE CategoryId=@CategoryId”  Runat=”server”> 
    <SelectParameters>  <!-- 通过ControlParameter获得主GridView的SelectedValue --> 
         <asp:ControlParameter Name=”CategoryId” ControlID=”grdMovieCategories” PropertyName=”SelectedValue” /> 
    </SelectParameters> 

    2.2 除了SelectVaule可以获得被选中行的信息以外，还有几个属性可以获得被选中行的信息
      ● SelectedDataKey : 返回被选中行相关的DataKey对象。*有多个数据键时很有用*
      ● SelectedIndex : 返回选中行的索引(从零计算)
      ● SelectedValue : 返回选中行的数据键值
      ● SelectedRow : 返回被选中的行，返回GridViewRow对象。

    2.3 为DataKeyNames绑定多个关键值
          为DataKeyNames绑定多个关键值很简单，字符串内各键值以,分隔就可以了，如：

<asp:GridView id=”grdEmployees” DataSourceID=”srcEmployees”
        DataKeyNames=”LastName,FirstName” AutoGenerateSelectButton=”true” Runat=”server” />

           在绑定多个关键值的情况下，取值就不是使用SelectedValue了，而是使用SelectedDataKey属性，如：

<asp:SqlDataSource id=”srcEmployeeDetails” ConnectionString=”<%$ ConnectionStrings:Employees %>”
         SelectCommand=”SELECT * FROM Employees  WHERE FirstName=@FirstName AND LastName=@LastName” Runat=”server”>
    <SelectParameters>
        <asp:ControlParameter Name=”FirstName” ControlID=”grdEmployees” PropertyName=’SelectedDataKey(“FirstName”)’ />
        <asp:ControlParameter Name=”LastName” ControlID=”grdEmployees” PropertyName=’SelectedDataKey(“LastName”)’ />
    </SelectParameters>
</asp:SqlDataSource>

    2.4 GridView的DataKey属性
          DataKey表示的是获取一个 DataKey 对象集合，这些对象表示 GridView 控件中的每一行的数据键值。
              public virtual DataKeyArray DataKeys { get; }
          怎么使用DataKey呢？如果知道要取GridView1第六行的DataKey键值，可以这样写：
              Object key = GridView1.DataKey[5].Value;
          如果组键有多个键值，可以这样取：
              Object key = GridView1.DataKey[5].Values("LastName");
          如果在SelectedIndexChanged事件中，可以这样写:
              int index = CustomersGridView.SelectedIndex;
              Message.Text =  CustomersGridView.DataKeys[index].Value.ToString() ;

 

备注：关于DataKey对象
DataKey 类用于表示数据绑定控件中某个记录的主键。记录的主键可以由数据源中的一个或多个字段组成。尽管 DataKey 类不是集合，但它可以存储多个键字段值。当调用 DataKey 类的某个构造函数时，将填充键字段值。可以通过以下方法从 DataKey 对象中检索键字段值：

    *      使用 DataKey.Item[Int32] 属性检索 DataKey 对象中特定索引位置的键字段值。
    *      使用 DataKey.Item[String]属性检索特定字段的键字段值。
    *      使用 Value 属性检索 DataKey 对象中索引 0 位置的键字段值。当主键只包含一个字段时，此属性常用作检索记录键值的快捷方式。
    *      使用 Values 属性创建可用于循环访问键字段值的 IOrderedDictionary 对象。

通常，当设置了数据绑定控件的 DataKeyNames 属性时，控件自动生成 DataKey 对象。DataKey 对象包含 DataKeyNames 属性中指定的一个或多个键字段的值。一次显示一个记录的数据绑定控件（如 DetailsView 或 FormView）通常在它的 DataKey 属性中存储所显示的当前记录的 DataKey 对象。一次显示多个记录的数据绑定控件（如 GridView）通常在 DataKeyArray 集合中存储它的每个记录的 DataKey 对象。然后，DataKeyArray 集合将存储在控件的 DataKeys 属性中。

 

3. GridView数据排序

     3.1 如何启用排序
      启用GridView的AllowSorting属性可以对呈现的数据行进行排序。排序支持顺序和逆序排序。多次点击，排序就在顺序和逆序间切换
      【注：显式指定GridView控件列时（例如绑定列），需要指定此列的SortExpression值才能支持排序。否则，点击此列标题不会对数据排序，切记切记。】
    3.2 AJAX排序
       声明GridView的EnableSortingAndPagingCallbacks属性为TRUE就可以启用AJAX排序。AJAX排序不会把整个页面都递交到服务器上。只有GridView才会被更新
      【注：在GridView中使用AJAX，就不能使用TemplateFields，也不会显示Selected按钮】
    3.3 定义排序界面外观
       通过响应GridView的RowDataBound事件就可以定制排序链接的外观
例4：自定义排序标题外观

<script runat=”server”>
protected void grdMovies_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)  //如果是首行
    {
        foreach (TableCell cell in e.Row.Cells)  //遍历首行的每个元素
        {
            LinkButton sortLink = (LinkButton)cell.Controls[0]; // 得到每个元素对象
            if (sortLink.Text == grdMovies.SortExpression)
            {
                if (grdMovies.SortDirection == SortDirection.Ascending)
                    sortLink.Text += "<img src='asc.gif'  title='Sort ascending' />";
                else
                    sortLink.Text += "<img src='desc.gif' title='Sort descending' />";
            }
        }
    }
}
</script> 

    3.4 用代码控制进行排序
         可以在代码中调用GridView.Sort()方法来对GridView排序：
            public virtual void Sort( string sortExpression, SortDirection sortDirection);
例5：后台代码控制排序：

<script runat=”server”>
protected void btnSort_Click(object sender, EventArgs e)
{
grdMovies.Sort(ddlSort.Text, SortDirection.Ascending);
}
</script>

<asp:DropDownList id=”ddlSort” Runat=”server”>
    <asp:ListItem Text=”Id” />
    <asp:ListItem Text=”Title” />
    <asp:ListItem Text=”Director” />
</asp:DropDownList>
<asp:Button id=”btnSort” Text=”Sort” Runat=”server” OnClick=”btnSort_Click” />
<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” Runat=”server” />

 

 

4.GridView的分页

     一般情况下，把GridView的AllowPaging属性设置成TURE就可以支持分页。通过修改PageSize属性可以指定每页显示的记录数。默认为10
     设置EnableSortingAndPagingCallBacks为true就可以使用AJAX进行分页。
   4.1 自定义分页
       默认情况下，GridView会在网格底部显示页码。通过修改GridView的PagerSettings属性可以修改分页界面
       PagerSettings 获取对 PagerSettings 对象的引用，使用该对象可以设置 GridView 控件中的页导航按钮的属性。
         public virtual PagerSettings PagerSettings { get; }
       关于GridView分页中的导航设定，分别涉及到三个属性：
         ● PagerSettings: PagerSettings 对象的引用，使用该对象可以设置 GridView 控件中的页导航按钮的属性。
         ● PagerStyle：获取对 TableItemStyle 对象的引用，使用该对象可以设置 GridView 控件中的页导航行的外观。
         ● PagerTemplate:获取或设置 GridView 控件中页导航行的自定义内容。
    4.2 PagerSettings对象
        上一节提到PagerSettings属性可以设置导航按钮的属性，其返回的是一个PagerSettings对象。这个对象又具备一些重要属性，真是属性套属性啊。
           ● FirstPageImageUrl : 第一个按钮显示的图像URL
           ● FristPageText ：第一页按钮显示的文字 。
           ● LastPageImageUrl、LastPageText、NextPageImageUrl、NextPageText、PreviousPageImageUrl、PreviousPageText ：介绍略
           ● Mode：分页显示模式，支持NextPrevious、NextPreviousFirstLast、Numeric、NumbericFirstLast
           ● PagetButtonCount：页按钮的数量，
                如果数据多的场合，显示所有的页码链接非常不现实，设定PagetButtonCount，最多小面显示多少个页码，其它的用省略号表示。
           ● Position：分页界面的显示位置
           ● Visible：是否显示
例6：自定义分页导航

<asp:gridview id="CustomerGridView" datasourceid="CustomerDataSource" 
     autogeneratecolumns="true" datakeynames="CustomerID" allowpaging="true" runat="server">
     <pagersettings mode="NextPreviousFirstLast" firstpagetext="First"
          lastpagetext="Last" nextpagetext="Next" previouspagetext="Prev" position="Bottom"/>
</asp:gridview> 

     4.3 使用模板显示导航页：PageTemplate属性
         使用PageTemplate属性，可以自定义导航显示的样式，导航栏可以加入任何asp.net服务器控件(button,ImageButton,LinkButton)。使用PageTemplate，按以下语法使用

<asp:GridView>
   <PagerTemplate>ITemplate</PagerTemplate>
</asp:GridView>

         一个 System.Web.UI.ITemplate，包含页导航行的自定义内容。默认值为 null，表示未设置此属性。
         在PageTemplate加入的Button控件，把CommandName属性设定为Page,CommandArgument属性设为以下四个值之一，就可以进行页面导航：
            ● Next:导航至下一页
            ● Prev:导航至上一页
            ● First:导航至首页
            ● Last:导航至末页
            ● Interger:导航至指定页码
        不止可以加入Button型控件，也可以加入BulletedList,DropdownList,Menu等控件，进行导航，点击相应的Item时，只要设定与之对应gridView.PageIndex即可。GridView会自动帮你链接到相应的页面。
例7：使用PageTemplate进行导航，使用Menu控件和Button控件结合进行导航

<script runat=”server”>
protected void grdMovies_DataBound(object sender, EventArgs e)
{
    Menu menuPager = (Menu)grdMovies.BottomPagerRow.FindControl(“menuPager”);  // 获得Menu控件对象
    for (int i = 0; i < grdMovies.PageCount; i++)   // 取得GridView的总页数
    {
        MenuItem item = new MenuItem();             // 创建MenuItem
        item.Text = String.Format("",i + 1);           // 设置其文字显示
        item.Value = i.ToString();                         // 设置其Value
        if (grdMovies.PageIndex == i)                   // 如果是当前页面是本Item的值
            item.Selected = true;                           // Selected值为true
        menuPager.Items.Add(item);                    // 加入Menu
    }
}
protected void menuPager_MenuItemClick(object sender, MenuEventArgs e)
{
      grdMovies.PageIndex = Int32.Parse(e.Item.Value);  // 点击Menu上的Item的动作，转到相应的页面
}
</script>

<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” AllowPaging=”true” PageSize=”3”
         Runat=”server” OnDataBound=”grdMovies_DataBound”>
    <PagerTemplate>
        <table>
            <tr>
                 <td><asp:LinkButton id=”lnkPrevious” Text=”&lt; Prev” CommandName=”Page”
                         CommandArgument=”Prev” ToolTip=”Previous Page” Runat=”server” />
                 </td>
                 <td><asp:Menu id=”menuPager” Orientation=”Horizontal” OnMenuItemClick=”menuPager_MenuItemClick”
                         StaticSelectedStyle-CssClass=”selectedPage” CssClass=”menu” Runat=”server” />
                </td>
                 <td><asp:LinkButton id=”lnkNext” Text=”Next &gt;” CommandName=”Page”
                         CommandArgument=”Next”  ToolTip=”Next Page” Runat=”server” />
                 </td>
          </tr>
       </table>
    </PagerTemplate>
</asp:GridView>

小技巧：可以使用@page指令中的MaintainScrollPositionOnPostback属性，通过它可以使页面无论在什么时候回发都定位到相同的位置。

5.编辑数据

   5.1.空数据如何显示
          默认的，没有任何结果从数据源返回的时候，GridView是不进行显示的，这时，可以通过GridView的两个属性来显示没有数据时应该显示的内容。
            ● EmptyDataText：获取或设置在 GridView 控件绑定到不包含任何记录的数据源时所呈现的空数据行中显示的文本。
            ● EmptyDataTemplate: 获取或设置在 GridView 控件绑定到不包含任何记录的数据源时所呈现的空数据行的用户定义内容。
          以上，EmptyDataText比较简单，当数据为空时，GridView显示的位置会显示其中的内容，内容可以包含HTML标记，
例8：EmptyDataText属性设定
<asp:GridView id=”grdMovies” DataSourceID=”srcMovies”
         EmptyDataText=”<img src=’sad.gif’/> No Matching Movies!” Visible=”false” Runat=”server” />
         而EmptyDataTemplate可以在其中加入相应的服务器控件，显示成任何想显示的样子，格式如下：

<asp:GridView>
    <EmptyDataTemplate>ITemplate</EmptyDataTemplate>
</asp:GridView>

 例9：EmptyDataTemplate属性设定

<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” Visible=”false” Runat=”server”>
     <EmptyDataTemplate>
         <p>No matching movies were found. If you would liketo add a new movie, enter it in the form below. </p>
         <asp:DetailsView id=”dtlMovie” DataSourceID=”srcMovies” DefaultMode=”Insert”
                  AutoGenerateInsertButton=”true” AutoGenerateRows=”false” Runat=”server” OnItemInserted=”dtlMovie_ItemInserted”>
              <Fields>
                  <asp:BoundField HeaderText=”Title:” DataField=”Title” />
                  <asp:BoundField HeaderText=”Director:” DataField=”Director” />
              </Fields>
         </asp:DetailsView>
    </EmptyDataTemplate>
</asp:GridView>

     5.2 格式化GridView控件
            GridView有丰富的格式化属性，这些属性可以修改GridView的外观。GridVie本身有CssClass属性，但也暴露了以下Style的属性，Style对象也具有CssClass属性
          ● AlternationRowStlye: 可以设置交替行的外观
          ● FooterStyle:可以设置脚注行的外观 
          ● HeaderStyle：可以设置标题行的外观 
          ● PagerStyle：可以设置导航页的外观
          ● RowStyle: 可以设置交替行的外观，与AlternationRowStlye交互
          ● SelectedRowStyle: 设置选中行的外观
例10：使用CSS控制Gridview的外观

<style type=”text/css”>
.grid {
    font:16px Arial, Sans-Serif;
}
.grid td, .grid th {
    padding:10px;
}
.header {
    text-align:left;
    color:white;
    background-color:blue;
}
.row td {
    border-bottom:solid 1px blue;
}
.alternating {
    background-color:#eeeeee;
}
.alternating td {
    border-bottom:solid 1px blue;
}
</style>
<!-- GridView,HeaderStyle,RowStyle,AlternatingRowStyle的CssClass设定-->
<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” GridLines=”None”
        CssClass=”grid” HeaderStyle-CssClass=”header”
        RowStyle-CssClass=”row” AlternatingRowStyle-CssClass=”alternating” Runat=”server” />

        除了以上属性外，还有几个比较有用的格式属性，如：
            ● GridLines: 网格边框属性，可以取值为Both,Vertical,Horizontal和None
            ● ShowFooter: 如果为True，则将在GrdiView的底部输出脚注行
            ● ShoeHeader: 如果为TRUE，则将输出标题行

    5.3 GridView中的ViewState
         默认场合，GridView控件保存呈现在ViewState中的所有行和列的值，这些数据都保存在一个隐藏表单字段中。
         使用ViewState的好处是GridView不需要每次翻页时都去数据库获取同样的记录集合，而只要页面初次加载就可以了(!IsPostback)
         但是，数据量大的时候，使用ViewState也会成为负担，所以禁用ViewState非常有必要
         所以，设置GridView的EnableViesState属性为FALSE就可以禁用ViewState。

6. GridView控件中使用字段(FieldType)

    请详见以下文章: http://www.cnblogs.com/shipfi/archive/2009/10/17/1585219.html

7. GridView控件的事件 

    请详见以下文章： http://www.cnblogs.com/shipfi/archive/2009/10/18/1585453.html

8.扩展GridView

    详见以下文章:http://www.cnblogs.com/shipfi/archive/2009/10/18/1585647.html

9. 一些常用技巧

    ● 使用列汇总：有时需要在数据列的底部显示某字段的汇总信息，汇总信息可以在FooterRow中显示，通过DataBound事件来进行列值的累计
例11:显示列汇总

<script runat=”server”>
    private decimal _boxOfficeTotalsTotal = 0;
    protected void grdMovies_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow) {
            decimal boxOfficeTotals = (decimal)DataBinder.Eval(e.Row.DataItem, "BoxOfficeTotals");
            _boxOfficeTotalsTotal += boxOfficeTotals;
        }
        if (e.Row.RowType == DataControlRowType.Footer) {
            Label lblSummary = (Label)e.Row.FindControl("lblSummary");
            lblSummary.Text = String.Format("Total: {0:c}", _boxOfficeTotalsTotal);
        }
    }
</script>

<asp:GridView id=”grdMovies” DataSourceID=”srcMovies” OnRowDataBound=”grdMovies_RowDataBound”
       AutoGenerateColumns=”false” ShowFooter=”true” Runat=”server”>
    <Columns>
        <asp:BoundField DataField=”Title” HeaderText=”Title” />
        <asp:TemplateField HeaderText=”Box Office Totals”>
            <ItemTemplate> <%# Eval(“BoxOfficeTotals”, “{0:c}”) %> </ItemTemplate>
            <FooterTemplate><asp:Label id=”lblSummary” Runat=”server” /></FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

    ● 嵌套主从表: 使用GridView中的TemplateField，该Field中再套GridView，另外通过RowDataBound变更TemplateField中的SqlDataSource属性
例12:  嵌套的主从表

<script runat="server">
protected void grdMovieCategories_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) {
        int categoryId = (int)DataBinder.Eval(e.Row.DataItem,"Id");
        // TemplateField中获取SqlDataSource控件，必须使用FindControl方法
        SqlDataSource srcMovies = (SqlDataSource)e.Row.FindControl(“srcMovies");
        srcMovies.SelectParameters[“CategoryId"].DefaultValue = categoryId.ToString();
    }
}
</script>

<style type="text/css">
.categories h1 {
    font:bold 16px Arial, Sans-Serif;
}
.movies {
    margin-left:20px;
    margin-bottom:10px;
    width:100%;
}
</style>

<asp:GridView id="grdMovies" DataSourceID="srcMovieCategories"
      OnRowDataBound="grdMovieCategories_RowDataBound" AutoGenerateColumns="false"
      ShowHeader="false" GridLines="none" CssClass="categories" Runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <h1><%# Eval(“Name") %></h1>
                <asp:GridView id="grdMovies" DataSourceId="srcMovies" CssClass="movies"
                   GridLines="none" Runat="server" />
                <asp:SqlDataSource id="srcMovies" ConnectionString="<%$ ConnectionStrings:Movies %>"
                    SelectCommand="SELECT Title,Director FROM Movies WHERE CategoryId=@CategoryId" Runat="server">
                    <SelectParameters>
                        <asp:Parameter Name="CategoryId" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<asp:SqlDataSource id="srcMovieCategories" ConnectionString="<%$ ConnectionStrings:Movies %>"
    SelectCommand="SELECT Id,Name FROM MovieCategories" Runat="server" />