大家可能都對datagrid比較熟悉，但是如果在數(shù)據(jù)量大的時候，我們就得考慮使用 repeater作為我們的數(shù)據(jù)綁定控件了。Repeater控件與DataGrid (以及DataList)控件的主要區(qū)別是在于如何處理HTML。ASP.NET建立HTML代碼以顯示DataGrid控件，但Repeater允許開發(fā)人員決定如何顯示數(shù)據(jù)。所以，你可以選擇將數(shù)據(jù)顯示在一個HTML表格中或者一個順序列表中。這主要取決于你的選擇，但你必須將正確的HTML插入到 ASP.NET頁面中。 模板與DataList一樣，Repeater控件只支持模板。以下的模板可供選擇： AlternatingItemTemplate: 指定如何顯示每一其它選項。 ItemTemplate: 指定如何顯示選項。(AlternatingItemTemplate可以覆蓋這一模板。) HeaderTemplate: 建立如何顯示標(biāo)題。 FooterTemplate: 建立如何顯示頁腳。 SeparatorTemplate: 指定如何顯示不同選項之間的分隔符。 你可以使用這些模板來顯示你希望的數(shù)據(jù)。唯一具有強制性的模板是ItemTemplate，所有其它的模板都是具有選擇性的。 對于處理一個數(shù)據(jù)源，Repeater控件具有與DataGrid與DataList相同的屬性： DataMember：獲得或者設(shè)置與 Repeater 控件綁定的相應(yīng)DataSource屬性的表格。 DataSource：獲得或者設(shè)置為 Repeater 顯示提供數(shù)據(jù)的數(shù)據(jù)源。 除此之外，還有一個Items屬性，你可以通過這一屬性編程訪問Repeater數(shù)據(jù)中單一選項。它返回一個RepeaterItemCollection對象，為一組RepeaterItem對象的集合，代表 Repeater 數(shù)據(jù)的每一行。 ASP.NET Web數(shù)據(jù)控件還有其它一個共性：它們都使用DataBind方法來生成用戶界面。調(diào)用這一方法可以返回并顯示數(shù)據(jù)(假設(shè)DataSource和 DataMember屬性設(shè)置正確)。在查看DataBind方法之前，我們先看看如何在一個Web頁面中使用一個Repeater控件。 使用Repeater控件 使用Repeater控件的第一步驟是決定我們將要使用的數(shù)據(jù)源和字段。例如，我們將要使用SQL Server Northwind數(shù)據(jù)庫中的Employees列表。Web頁面將顯示職工的完整名字，地址，以及電話號碼。HTML將使用DIV標(biāo)記，用 Repeater 模板來分隔內(nèi)容。下面是 Web 頁面的 HTML 內(nèi)容：
前臺代碼
| 代碼如下 | 復(fù)制代碼 |
<asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate><table cellpadding="0" cellspacing="0" border="1" align="center" class="auto-style1"> <tr align="left"> <th>編號</th> <th>姓名</th> <th>年齡</th> <th>班級</th> <th>零花</th> </tr> </HeaderTemplate> <ItemTemplate> <tr > <td><%#Eval("id")%></td> <td><%#Eval("name")%></td> <td><%#Eval("age")%></td> <td><%#Eval("classid")%></td> <td><%#Eval("salary")%></td> </tr> </ItemTemplate> <FooterTemplate></table></FooterTemplate> </asp:Repeater> | |
后臺代碼
| 代碼如下 | 復(fù)制代碼 |
| string sql = string.Format("select * from person"); DataTable dt = sqlhelper.helper.ExecuteQuery(sql); Repeater1.DataSource = dt; Repeater1.DataBind(); | |
AspNetpager的使用方法：
首先注冊<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" Tag 前臺：
| 代碼如下 | 復(fù)制代碼 |
| <webdiyer:AspNetPager ID="AspNetPager1" runat="server" CustomInfoHTML="第%CurrentPageIndex%頁，共%PageCount%頁，每頁%PageSize%條" FirstPageText="首頁" LastPageText="尾頁" LayoutType="Table" NextPageText="下一頁" onpagechanging="AspNetPager1_PageChanging" PageIndexBoxType="DropDownList" PagingButtonLayoutType="Span" PrevPageText="上一頁" ShowCustomInfoSection="Left" ShowPageIndexBox="Always" SubmitButtonText="Go" TextAfterPageIndexBox="頁" TextBeforePageIndexBox="轉(zhuǎn)到" Width="450px" PageSize="3"> </webdiyer:AspNetPager> | |
后臺：
| 代碼如下 | 復(fù)制代碼 |
| private void AddPages(Repeater rpt,Wuqi.Webdiyer.AspNetPager anp,DataTable dt) { PagedDataSource pds = new PagedDataSource(); pds.AllowPaging = true; pds.DataSource = dt.DefaultView; anp.RecordCount = dt.Rows.Count;//給分頁控件指定當(dāng)前總數(shù) pds.PageSize = anp.PageSize;//確定分頁，每頁有n項 pds.CurrentPageIndex = anp.CurrentPageIndex - 1;//確定當(dāng)前頁數(shù) rpt.DataSource = pds;//綁定數(shù)據(jù)源 rpt.DataBind(); } protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e) { AspNetPager1.CurrentPageIndex = e.NewPageIndex; BindPersonData(); } | |
例子
repeater控件動態(tài)添加、刪除一行
| 代碼如下 | 復(fù)制代碼 |
<script type="text/javascript"> var txtEquipmentIdsIDArray = new Array(); function OpenWindow(clientId, TypeId, ReqNum) { var url = "../EquipmentIssue/EquipmentRequestIssue.aspx?TypeId=" + TypeId + "&ReqNum=" + ReqNum; var widths = 600; var heigths = 450; var winPar = window.showModalDialog(url, window, 'dialogWidth=' + widths + 'px;dialogHeight=' + heigths + 'px;status=no;center=yes;scroll=no;help:No;'); if (winPar != undefined) { var txtEquipmentIds = document.getElementById(clientId); txtEquipmentIds.value = winPar; // //審批用戶控件中保存發(fā)放的EquipmentId// var IsExistEquipmentIdsID = false;// for (var i = 0; i < txtEquipmentIdsIDArray.length; i++) {// if (txtEquipmentIdsIDArray[i] == clientId) {// IsExistEquipmentIdsID = true;// }// }// if (IsExistEquipmentIdsID == false) {// txtEquipmentIdsIDArray.push(clientId);// }// var tempEquipmentId = "";// for (var i = 0; i < txtEquipmentIdsIDArray.length; i++) {// tempEquipmentId = tempEquipmentId + document.getElementById(txtEquipmentIdsIDArray[i]).value;// var hiddenEquipmentIds = document.getElementById("UC_ApprovalAction1_hfEquipmentIds");// hiddenEquipmentIds.value = tempEquipmentId;// }// //alert(hiddenEquipmentIds.value); } var tempReturnValue = ""; var tb_Request = document.getElementById("tb_Request"); var tr = tb_Request.getElementsByTagName("tr"); for (var i = 0; i < tr.length; i++) { if (tr[i].id != "") { var span_EquRequestItemId = tr[i].getElementsByTagName("span"); //獲取申請明細(xì)的IDEquRequestItemId var select_ddlStation; //獲取使用工位StationId var option = tr[i].getElementsByTagName("select")[1].getElementsByTagName("option"); for (var j = 0; j < option.length; j++) { if (option[j].selected) { select_ddlStation = option[j] } } var textarea_EquipmentIds = tr[i].getElementsByTagName("textarea"); //獲取發(fā)放的資產(chǎn)號EquipmentNo tempReturnValue = tempReturnValue + span_EquRequestItemId[0].innerText + ":" + select_ddlStation.value + ":" + textarea_EquipmentIds[0].innerText + "|"; } } var hiddenEquipmentIds = document.getElementById("UC_ApprovalAction1_hfEquipmentIds"); hiddenEquipmentIds.value = tempReturnValue; //alert(hiddenEquipmentIds.value); } </script> | |
Repeater:
| 代碼如下 | 復(fù)制代碼 |
<div id="div_Repeater"> <asp:HiddenField ID="hfRptColumns" runat="server" Value="G 學(xué)習(xí)交流
熱門圖片
猜你喜歡的新聞
新聞熱點  2019-10-23 09:17:05
 2019-10-21 09:20:02
 2019-10-21 09:00:12
 2019-09-26 08:57:12
 2019-09-25 08:46:36
 2019-09-25 08:15:43
疑難解答
| |
