asp.net repeater控件操作

    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时的颜色值)

<script>

  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文件中添加子菜单的显示和隐藏代码

 

你可能感兴趣的:(asp.net)