asp.net repeater控件操做

時間 2019-12-05

原文原文鏈接

Repeater控件和DataList控件，能夠用來一次顯示一組數據項。好比，能夠用它們顯示一個數據表中的全部行。　　Repeater控件徹底由模板驅動，提供了最大的靈活性，能夠任意設置它的輸出格式。　　DataList控件也由模板驅動，和Repeater不一樣的是，DataList默認輸出是HTML表格，DataList將數據源中的記錄輸出爲HTML表格一個個的單元格。javascript

Repeater支持如下5種模板 ● ItemTemplate : 對每個數據項進行格式設置 (必須的添加項) ● AlternatingItemTemplate : 對交替數據項進行格式設置 ● SeparatorTemplate : 對分隔符進行格式設置 ● HeaderTemplate : 對頁眉進行格式設置 ● FooterTemplate : 對頁腳進行格式設置html

　Repeater控件有如下事件： ● DataBinding : Repeater控件綁定到數據源時觸發 ● ItemCommand : Repeater控件中的子控件觸發事件時觸發 ● ItemCreated : 建立Repeater每一個項目時觸發 ● ItemDataBound : Repeater控件的每一個項目綁定數據時觸發java

1 //table畫橫線樣式表table畫橫線樣式表table畫橫線樣式表table畫橫線樣式表
2 table.tabData{border-collapse: collapse;border: 1px solid #9CF;text-align:center;}   
3 table.tabData thead td,table.set_border th{font-weight:bold;background-color:White;}   
4 table.tabData tr:nth-child(even){background-color:#EAF2D3;}   
5 table.tabData td,table.border th{border:1px solid #C3C3C3;text-align:center;}

//repeater畫橫線樣式表
 1 <asp:Repeater ID="Repeater1" runat="server">
 2         <HeaderTemplate>
 3             <table class="tabData">
 4                 <tr class="tr_head">
 5                     <th style="width: 200px; text-align: center;">
 6                         縣
 7                     </th>
 8                     <th style="width: 200px; text-align: center;">
 9                         鄉
10                     </th>
11                      <th style="width: 200px; text-align: center;">
12                         村
13                     </th>
14                     <th style="width: 200px; text-align: center;">
15                         查看/修改
16                     </th>
17                 </tr>
18         </HeaderTemplate>
19         <ItemTemplate>
20             <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#FFFFF;":"#fcf3f4"%>'
21                 onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
22                 <td>
23                     <%#Eval("XianID")%>
24                 </td>
25                  <td>
26                     <%#GetNameByID(Eval("XiangID"))%>
27                 </td>
28                 <td>
29                     <%#Eval("strName")%>
30                 </td>
31                 <td>
32                     <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
33                 </td>
34                 <%-- <td><input type="button" value="刪除" onclick="FunDelete(<%#Eval("ID") %>)" /></td>--%>
35             </tr>
36         </ItemTemplate>
37         <FooterTemplate>
38             <!--底部模板-->
39             </table>
40             <!--表格結束部分-->
41         </FooterTemplate>
42     </asp:Repeater>
43 
44 repeater 綁定示例文件

同時須要在後臺綁定repeater的數據源jquery

　　Container.ItemIndex爲當前行的索引，從0開始ide

　　style='background-color: <%#(Container.ItemIndex%2==0)?"#FFFFF;":"#fcf3f4"%>' 設置了repeater的隔行變色ui

　　onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)" 設置了repeater的鼠標懸浮變色this

js方法以下(colorName爲頁面中的一個隱藏的input標籤，用於保存onmouseover時的顏色值)spa

<script>code

　　function change_colorOver(e) { 　　var oldColor = e.style.backgroundColor; 　　document.getElementById("colorName").value = oldColor; 　　e.style.backgroundColor = "#b9bace"; 　　} 　　function change_colorOut(e) { 　　 e.style.backgroundColor = document.getElementById("colorName").value; 　　}orm

</script>

嵌套Repeater示例

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.BasicData.Data.WebForm1" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title></title>
  8    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  9     <script type="text/javascript">
 10         //表格鼠標懸停換色
 11         function change_colorOver(e) {
 12             var oldColor = e.style.backgroundColor;
 13             document.getElementById("colorName").value = oldColor;
 14             e.style.backgroundColor = "#b9bace";
 15         }
 16         function change_colorOut(e) {
 17             e.style.backgroundColor = document.getElementById("colorName").value;
 18         }
 19         //顯示和隱藏子菜單
 20         function Ctoggle(obj) {
 21             if (obj.alt == "open") {
 22                 obj.alt = "close";
 23                 obj.src = "../../images/minus.gif";
 24                 $(obj).parent().parent().next().fadeIn();
 25             } else {
 26                 obj.alt = "open";
 27                 obj.src = "../../images/plus.gif";
 28                 $(obj).parent().parent().next().fadeOut();
 29             }
 30         }
 31     </script>
 32 </head>
 33 <body>
 34     <form id="form1" runat="server">
 35     <div>
 36      <asp:Repeater ID="R1" runat="server" onitemdatabound="R1_ItemDataBound">
 37         <HeaderTemplate>
 38             <table class="tabData">
 39                 <tr class="tr_head">
 40                     <th style="width: 200px; text-align: center;">
 41                         縣
 42                     </th>
 43                     <th style="width: 200px; text-align: center;">
 44                         鄉
 45                     </th>
 46                     <th style="width: 200px; text-align: center;">
 47                         查看/修改
 48                     </th>
 49                 </tr>
 50         </HeaderTemplate>
 51         <ItemTemplate>
 52             <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#ccc;":"#fcf3f4"%>'
 53                 onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
 54                 <td>
 55                <img alt="open" src="../../images/plus.gif" onclick="Ctoggle(this)" />    <%#Eval("XianID")%>
 56                 </td>
 57                  <td>
 58                     <%#Eval("strName")%>
 59                 </td>
 60                 <td>
 61                     <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
 62                 </td>
 63                
 64             </tr>
 65            <tr style="display:none">
 66                <td colspan="3">
 67                    <asp:Repeater ID="R2" runat="server" >
 68                       
 69                        <ItemTemplate>
 70                        <table class="tabData">
 71                            <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#ccc;":"#fcf3f4"%>'
 72                                onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
 73                                <td style="width:100px"></td>
 74                                <td style="width:100px;">
 75                                    <%#Eval("XiangID")%>
 76                                </td>
 77                                <td style="width:200px;">
 78                                    <%#Eval("strName")%>
 79                                </td>
 80                                <td style="width:200px;">
 81                                    <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
 82                                </td>
 83                            </tr>
 84                        </ItemTemplate>
 85                        <FooterTemplate>
 86                            <!--底部模板-->
 87                            </table>
 88                            <!--表格結束部分-->
 89                        </FooterTemplate>
 90                    </asp:Repeater>
 91                </td>
 92             </tr>
 93         </ItemTemplate>
 94         <FooterTemplate>
 95             <!--底部模板-->
 96             </table>
 97             <!--表格結束部分-->
 98         </FooterTemplate>
 99     </asp:Repeater>
100     </div>
101     <div id="divhidd" style=" width:100px; height:100px; background-color:#aaa; display:none;"></div>
102     </form>
103     <%--定義背景色的隱藏域--%>
104     <input type="hidden" id="colorName" value="" />
105 </body>
106 </html>

前臺代碼

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 using System.Text;
 8 using System.Data;
 9 
10 namespace Web.BasicData.Data
11 {
12     public partial class WebForm1 : System.Web.UI.Page
13     {
14         protected void Page_Load(object sender, EventArgs e)
15         {
16             if (!IsPostBack)
17             {
18                 BindData();
19             }
20         }
21 
22         public void BindData()
23         {
24             StringBuilder strSql = new StringBuilder();
25 
26             strSql.Append("  SELECT A.ID, B.strName AS XianID,A.strName FROM dbo.BD_Address_Xiang A INNER JOIN dbo.BD_Address_Xian B ON A.XianID=B.ID");
27             DataTable dt = SQLHelper.ExecuteDataTable(strSql.ToString());
28             if (dt != null && dt.Rows.Count != 0)
29             {
30                 this.R1.DataSource = dt.DefaultView;
31                 this.R1.DataBind();
32             }
33         }
34 
35         protected void R1_ItemDataBound(object sender, RepeaterItemEventArgs e)
36         {
37             if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
38             {
39                 Repeater rep = e.Item.FindControl("R2") as Repeater;
40                 DataRowView rowv = (DataRowView)e.Item.DataItem;
41                 int XiangID = Convert.ToInt32(rowv["ID"]);
42                 StringBuilder strSql = new StringBuilder();
43 
44                 strSql.Append("  SELECT A.ID,B.strName AS XiangID,A.strName AS strName");
45                 strSql.Append("  FROM dbo.BD_Address_Cun A INNER JOIN dbo.BD_Address_Xiang B ON A.XiangID=B.ID");
46                 strSql.Append("  WHERE B.ID="+XiangID);
47                 DataTable dt = SQLHelper.ExecuteDataTable(strSql.ToString());
48                 if (dt != null && dt.Rows.Count != 0)
49                 {
50                     rep.DataSource = dt.DefaultView;
51                     rep.DataBind();
52                 }
53             }
54         }
55     }
56 }
57 
58 後臺代碼