asp.net repeater控件操作

本文轉載自查看原文 2015-03-09 15:51 6158 C#

　 Repeater控件和DataList控件，可以用來一次顯示一組數據項。比如，可以用它們顯示一個數據表中的所有行。
　　Repeater控件完全由模板驅動，提供了最大的靈活性，可以任意設置它的輸出格式。
　　DataList控件也由模板驅動，和Repeater不同的是，DataList默認輸出是HTML表格，DataList將數據源中的記錄輸出為HTML表格一個個的單元格。

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

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

table.tabData{border-collapse: collapse;border: 1px solid #9CF;text-align:center;}   
table.tabData thead td,table.set_border th{font-weight:bold;background-color:White;}   
table.tabData tr:nth-child(even){background-color:#EAF2D3;}   
table.tabData td,table.border th{border:1px solid #C3C3C3;text-align:center;}

table畫橫線樣式表

 <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <table class="tabData">
                <tr class="tr_head">
                    <th style="width: 200px; text-align: center;">
                        縣
                    </th>
                    <th style="width: 200px; text-align: center;">
                        鄉
                    </th>
                     <th style="width: 200px; text-align: center;">
                        村
                    </th>
                    <th style="width: 200px; text-align: center;">
                        查看/修改
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#FFFFF;":"#fcf3f4"%>'
                onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
                <td>
                    <%#Eval("XianID")%>
                </td>
                 <td>
                    <%#GetNameByID(Eval("XiangID"))%>
                </td>
                <td>
                    <%#Eval("strName")%>
                </td>
                <td>
                    <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
                </td>
                <%-- <td><input type="button" value="刪除" onclick="FunDelete(<%#Eval("ID") %>)" /></td>--%>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <!--底部模板-->
            </table>
            <!--表格結束部分-->
        </FooterTemplate>
    </asp:Repeater>

repeater 綁定示例文件

　　同時需要在后台綁定repeater的數據源

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

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

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

js方法如下(colorName為頁面中的一個隱藏的input標簽，用於保存onmouseover時的顏色值)

　　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;
　　}

</script>

嵌套Repeater示例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.BasicData.Data.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //表格鼠標懸停換色
        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;
        }
        //顯示和隱藏子菜單
        function Ctoggle(obj) {
            if (obj.alt == "open") {
                obj.alt = "close";
                obj.src = "../../images/minus.gif";
                $(obj).parent().parent().next().fadeIn();
            } else {
                obj.alt = "open";
                obj.src = "../../images/plus.gif";
                $(obj).parent().parent().next().fadeOut();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:Repeater ID="R1" runat="server" onitemdatabound="R1_ItemDataBound">
        <HeaderTemplate>
            <table class="tabData">
                <tr class="tr_head">
                    <th style="width: 200px; text-align: center;">
                        縣
                    </th>
                    <th style="width: 200px; text-align: center;">
                        鄉
                    </th>
                    <th style="width: 200px; text-align: center;">
                        查看/修改
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#ccc;":"#fcf3f4"%>'
                onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
                <td>
               <img alt="open" src="../../images/plus.gif" onclick="Ctoggle(this)" />    <%#Eval("XianID")%>
                </td>
                 <td>
                    <%#Eval("strName")%>
                </td>
                <td>
                    <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
                </td>
               
            </tr>
           <tr style="display:none">
               <td colspan="3">
                   <asp:Repeater ID="R2" runat="server" >
                      
                       <ItemTemplate>
                       <table class="tabData">
                           <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#ccc;":"#fcf3f4"%>'
                               onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
                               <td style="width:100px"></td>
                               <td style="width:100px;">
                                   <%#Eval("XiangID")%>
                               </td>
                               <td style="width:200px;">
                                   <%#Eval("strName")%>
                               </td>
                               <td style="width:200px;">
                                   <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
                               </td>
                           </tr>
                       </ItemTemplate>
                       <FooterTemplate>
                           <!--底部模板-->
                           </table>
                           <!--表格結束部分-->
                       </FooterTemplate>
                   </asp:Repeater>
               </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <!--底部模板-->
            </table>
            <!--表格結束部分-->
        </FooterTemplate>
    </asp:Repeater>
    </div>
    <div id="divhidd" style=" width:100px; height:100px; background-color:#aaa; display:none;"></div>
    </form>
    <%--定義背景色的隱藏域--%>
    <input type="hidden" id="colorName" value="" />
</body>
</html>

前台代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;

namespace Web.BasicData.Data
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindData();
            }
        }

        public void BindData()
        {
            StringBuilder strSql = new StringBuilder();

            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");
            DataTable dt = SQLHelper.ExecuteDataTable(strSql.ToString());
            if (dt != null && dt.Rows.Count != 0)
            {
                this.R1.DataSource = dt.DefaultView;
                this.R1.DataBind();
            }
        }

        protected void R1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                Repeater rep = e.Item.FindControl("R2") as Repeater;
                DataRowView rowv = (DataRowView)e.Item.DataItem;
                int XiangID = Convert.ToInt32(rowv["ID"]);
                StringBuilder strSql = new StringBuilder();

                strSql.Append("  SELECT A.ID,B.strName AS XiangID,A.strName AS strName");
                strSql.Append("  FROM dbo.BD_Address_Cun A INNER JOIN dbo.BD_Address_Xiang B ON A.XiangID=B.ID");
                strSql.Append("  WHERE B.ID="+XiangID);
                DataTable dt = SQLHelper.ExecuteDataTable(strSql.ToString());
                if (dt != null && dt.Rows.Count != 0)
                {
                    rep.DataSource = dt.DefaultView;
                    rep.DataBind();
                }
            }
        }
    }
}

后台代碼

后台：啟用外層Repeater的ItemDataBound事件，在ItemDataBound事件中找到內層的Repeater，並綁定內層的Repeater

前台：外層的Repeater的ItemTemplate分為兩行；第一行綁定一個數據表的數據信息，和添加一個顯示控制按鈕

　　　第二行中嵌入內層的Repeater（樣式可以獨立設置）

　　然后在js文件中添加子菜單的顯示和隱藏代碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 asp.net中Repeater控件用法筆記 ASP.NET驗證控件詳解 ASP.NET驗證控件之RequiredFieldValidator ASP.NET數據控件之Chart的用法 asp.net中的CheckBox控件的使用 ASP.NET數據綁定控件 asp.net js獲取控件ID ASP.NET中ListBox控件的使用 ASP.NET Calendar（日歷控件） ASP.Net 中的三種控件