GridView學習
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>
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控件綁定資料之後,呈現每一行記錄時,都會觸發這個事件。
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: }
需透過程式調用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筆)
※此方式會先將資料讀至記憶體再進行分頁,適合小量資料,大量資料應該使用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="< 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 >"
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值(至指定的頁碼)