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:LinkButton9: 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:LinkButton23: 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值(至指定的頁碼)