GridView學習

GridView學習

顯示資料
SNAGHTML2769d25

   1:  //在web.Config設定一組資料庫連接字串  
   2:   
   3:    <connectionStrings>
   4:      <add name="con" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|MyDatabase.mdf;Integrated Security=True;User Instance=True"/>
   5:    </connectionStrings>
   1:      <form id="form1" runat="server">
   2:      <div>
   3:          //接下來只要設定gridview的資料來源
   4:          <asp:GridView ID="grdMovies" runat="server" DataSourceID="srcMovie" />
   5:         //資料來源
   6:          <asp:SqlDataSource ID="srcMovie" runat="server" ConnectionString="<%$ConnectionStrings:con %>"
   7:              SelectCommand="Select Id,Title,Director InTheaters,DateReleased From Movies" />
   8:      </div>
   9:      </form>
選取資料
SNAGHTML399c592
   1:  //設定一組格式化標籤
   2:  <head runat="server">
   3:      <title></title>
   4:      <style type="text/css">
   5:      html
   6:      {
   7:          background-color:Silver;
   8:          font-family:Georgia, Serif;
   9:      }
  10:      .gridView 
  11:      {
  12:          float:left;
  13:          margin-right:20px;
  14:          background-color:White;
  15:      }
  16:      .gridView th, .gridView th
  17:      {
  18:          padding:10px;
  19:      }
  20:      .selectedRow
  21:      {
  22:          background-color:Yellow;
  23:      }
  24:      </style>
  25:  </head>
   1:      <form id="form1" runat="server">
   2:      <div>
   3:          <asp:GridView ID="grdMovies" runat="server" 
   4:          DataSourceID="srcMovie" //資料來源
   5:          SelectedRowStyle-CssClass="selectedRow" //資料列選取時顯示樣式
   6:          AutoGenerateSelectButton="true" //選取的按鈕
   7:          DataKeyNames="Id,Title" //取得選取資料時,儲存相關欄位資訊
   8:          OnSelectedIndexChanged="grdMovie_OnSelectedIndexChanged" />//選取資料列觸發的事件
   9:              
  10:          <asp:SqlDataSource ID="srcMovie" runat="server" ConnectionString="<%$ConnectionStrings:con %>"
  11:              SelectCommand="Select Id,Title,Director InTheaters,DateReleased From Movies" />
  12:      </div>
  13:      </form>

※GridView的DataKeys的集合中保存所有資料的主鍵。
可以利用下列語法獲得正行有關的主鍵
Object key = grdView.DataKeys[6].Value <—取出第7行的主鍵值,由0開始計算。
Object key = grdView.DataKeys[6].Value(“Id”) <-- 取出第7行的主鍵值id

.資料排序
   1:  //設定AllowSorting="true"
   2:  <asp:GridView ID="grdView" runat="server" AllowSorting="true" ....../>

.使用Ajax排序
預設的情況下,無論何時在GRIDVIEW進行排序,此控制項的頁面都會被送回伺服器端,再對GRIDVIEW中的資料進行排序。

方法1. 將GRIDVIEW的EnableSortingAndPagingCallback屬性設為True(※但是必須取消AutoGenerateSelectButton="true")
方法2.

   1:      <form id="form1" runat="server">
   2:      <div>
   3:          <asp:ScriptManager ID="sm1" runat="server" /> //ajax的核心
   4:          <%= DateTime.Now.ToString("T") %>
   5:          <asp:UpdatePanel ID="updPanel1" runat="server">//將grdview包到updatePanel內
   6:              <ContentTemplate>//-------<
   7:                  <asp:GridView ID="grdMovies" runat="server" DataSourceID="srcMovie" SelectedRowStyle-CssClass="selectedRow"
   8:                      AutoGenerateSelectButton="true" DataKeyNames="Id,Title" OnSelectedIndexChanged="grdMovie_OnSelectedIndexChanged"
   9:                      AllowSorting="true" />
  10:              </ContentTemplate>
  11:          </asp:UpdatePanel>//-------->
  12:          <asp:SqlDataSource ID="srcMovie" runat="server" ConnectionString="<%$ConnectionStrings:con %>"
  13:              SelectCommand="Select Id,Title,Director InTheaters,DateReleased From Movies" />
  14:      </div>
  15:      </form>

.自定義排序界面
透過GridView控件的RowDataBound事件,定制排序連接的外觀。在為GridView控件綁定資料之後,呈現每一行記錄時,都會觸發這個事件。

imageSNAGHTMLd222a1

   1:  <form id="form1" runat="server">
   2:      <div>
   3:          <br />
   4:          <br />
   5:          <asp:GridView ID="grdMovies" runat="server" DataSourceID="srcMovie" SelectedRowStyle-CssClass="selectedRow"
   6:              DataKeyNames="Id,Title" OnSelectedIndexChanged="grdMovie_OnSelectedIndexChanged"
   7:              AllowSorting="true" OnRowDataBound="grdMovie_RowDataBound" />
   8:              
   9:          <asp:SqlDataSource ID="srcMovie" runat="server" ConnectionString="<%$ConnectionStrings:con %>"
  10:              SelectCommand="Select Id,Title,Director InTheaters,DateReleased From Movies" />
  11:          <%= DateTime.Now.ToString("T") %></div>
  12:      </form>
   1:  //事件處理RowDataBound
   2:  protected void grdMovie_RowDataBound(object sender, GridViewRowEventArgs e)
   3:      {
   4:          if (e.Row.RowType == DataControlRowType.Header)
   5:          {
   6:              foreach (TableCell cell in e.Row.Cells)
   7:              {
   8:                  LinkButton sortLink = (LinkButton)cell.Controls[0];
   9:                  if (sortLink.Text == grdMovies.SortExpression)
  10:                  {
  11:                      if (grdMovies.SortDirection == SortDirection.Ascending)
  12:                          sortLink.Text += "<img src='asc.gif' title='Sort ascending'/>";
  13:                      else
  14:                          sortLink.Text += "<img src='desc.gif' title='Sort descending'/>";
  15:                  }
  16:              }
  17:          }
  18:      }

.完全自定排序介面
image

需透過程式調用GridView的Sort方法。

   1:      <form id="form1" runat="server">
   2:      <div>
   3:          <asp:DropDownList ID="ddlSort" runat="server">
   4:              <asp:ListItem Text="Id" />
   5:              <asp:ListItem Text="Title" />
   6:          </asp:DropDownList>
   7:          
   8:          <asp:Button ID="btnSort" runat="server" Text="Sort" OnClick="btnSort_Click" />
   9:          
  10:          <asp:GridView ID="grdMovies" runat="server" DataSourceID="srcMovie" />
  11:          
  12:          <asp:SqlDataSource ID="srcMovie" runat="server" ConnectionString="<%$ConnectionStrings:con %>"
  13:              SelectCommand="Select Id,Title,Director InTheaters,DateReleased From Movies" />
  14:          <%= DateTime.Now.ToString("T") %></div>
  15:      </form>

   1:  //事件處理btnSort_Click
   2:      protected void btnSort_Click(object sender, EventArgs e)
   3:      {
   4:          grdMovies.Sort(ddlSort.Text, SortDirection.Ascending);
   5:      }

.分頁功能
設定屬性AllowPaging=“True" ,PageSize=”5”(每頁顯示筆數,預設為每頁10筆)
image

※此方式會先將資料讀至記憶體再進行分頁,適合小量資料,大量資料應該使用ObjectDataSource。

.使用Ajax進行分頁
預設情況下,每次換頁動作都會引發PostBack的動作。

   1:  //將GridView包入
   2:          <asp:ScriptManager ID="sm1" runat="server" />
   3:          <asp:UpdatePanel ID="up1" runat="server">
   4:              <ContentTemplate>
   5:                  <asp:GridView ID="grdMovies" runat="server" DataSourceID="srcMovie" AllowPaging="true"
   6:                      PageSize="3" />
   7:              </ContentTemplate>
   8:          </asp:UpdatePanel>
   1:  //在GridView內包入PagerTemplate(分頁範本),內部使用<table></table>定義位置,
   2:  //在GridView進行資料綁定(OnDataBound)時,進行格式化GridView自動產生的頁碼
   3:                  <asp:GridView ID="grdMovies" runat="server" DataSourceID="srcMovie" AllowPaging="true"  PageSize="3" OnDataBound="grdMovies_DataBound">
   4:                      <PagerTemplate>
   5:                      <table>
   6:                          <tr>
   7:                              <td>
   8:                              <asp:LinkButton
   9:                                  ID="lnkPrevious" runat="server"
  10:                                  Text="&lt; Prev"
  11:                                  CommandName="Page" CommandArgument="Prev"
  12:                                  ToolTip="Previous Page" />
  13:                              </td>
  14:                              <td>
  15:                              <asp:Menu ID="menuPager" runat="server"
  16:                                  Orientation="Horizontal"
  17:                                  OnMenuItemClick="menuPager_MenuItemClick"
  18:                                  StaticSelectedStyle-CssClass="selectedPage"
  19:                                  CssClass="menu" />
  20:                              </td>
  21:                              <td>
  22:                              <asp:LinkButton
  23:                                  ID="LinkButton1" runat="server"
  24:                                  Text="Next &gt;"
  25:                                  CommandName="Page" CommandArgument="Next"
  26:                                  ToolTip="Next Page" />                    
  27:                              </td>
  28:                          </tr>
  29:                      </table>
  30:                      </PagerTemplate>
  31:                  </asp:GridView>



   1:  //事件處理   
   2:   
   3:      protected void menuPager_MenuItemClick(object sender, MenuEventArgs e)
   4:      {
   5:          //依點選MenuItem切換GridView的頁籤
   6:          grdMovies.PageIndex = Int32.Parse(e.Item.Value);
   7:      }
   8:   
   9:  //資料綁定
  10:      protected void grdMovies_DataBound(object sender, EventArgs e)
  11:      {
  12:          //先找出Menu控制項(menuPager)後,MenuItem迴圈替換grdMovies自動產生的頁籤。
  13:          Menu menuPager = (Menu)grdMovies.BottomPagerRow.FindControl("menuPager");
  14:          for (int i = 0; i < grdMovies.PageCount; i++)
  15:          {
  16:              MenuItem item = new MenuItem();
  17:              item.Text = String.Format("{0}", i + 1);
  18:              item.Value = i.ToString();
  19:              if (grdMovies.PageIndex == i)
  20:              {
  21:                  item.Selected = true;
  22:              }
  23:              menuPager.Items.Add(item);
  24:          }
  25:      }
 
※要自定PagerTemplate,可以在樣版(PagerTemplate)中加入按鈕控件。Button、ImageButton、LinkButton.
將這此按鈕控制項的屬性CommandName設為Page,
並將CommandArgument屬性設為Next(下一頁)、Prev(上一頁)、First(首頁)、Last(末頁)、Integer值(至指定的頁碼)