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画横线样式表table画横线样式表table画横线样式表table画横线样式表
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;}
//repeater画横线样式表
1 <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="">
<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 != )
{
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 != )
{
rep.DataSource = dt.DefaultView;
rep.DataBind();
}
}
}
}
} 后台代码

后台代码

后台: 启用外层Repeater的ItemDataBound事件 ,在ItemDataBound事件中找到内层的Repeater,并绑定内层的Repeater

前台: 外层的Repeater的ItemTemplate分为两行;第一行绑定一个数据表的数据信息,和添加一个显示控制按钮

    第二行中嵌入内层的Repeater(样式可以独立设置)

      然后在js文件中添加子菜单的显示和隐藏代码

asp.net repeater控件操作的更多相关文章

  1. [ASP.NET]asp.net Repeater控件的使用方法

    asp.net Repeater控件的使用方法 -- : 4770人阅读 评论() 收藏 举报 asp.netserveraspdatasetdeletexhtml 今天学习了,Repeater控件 ...

  2. Asp.net Repeater控件的绑定与操作

    由于repeater 控件具有的一个特性--循环 <ItemTemplate>的内容,Repeater 控件里的某个元素对象的绑定与获取,不像平常的,直接使用控件的 id 便可以给该控件进 ...

  3. ASP.NET- 查找Repeater控件中嵌套的控件

    如何在Repeater的HeaderTemplate和FooterTemplate模板中寻找控件?在Repeater的ItemTemplate模板中的控件,我们可以用Items属性来遍历行并用Find ...

  4. Asp.net Repeater控件

    Repeater控件和DataList控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行.     Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出 ...

  5. ASP.NET Repeater控件实现简单分页

    早上,有看MSDN,看到了 PagedDataSource 类 http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.pa ...

  6. ASP.NET Repeater 控件分页

    protected void Page_Load(object sender, EventArgs e) { HttpContext context = HttpContext.Current; co ...

  7. ASP.NET用户控件操作ASPX页面

    定义一个不含数据的事件处理方法 用户控件 public event EventHandler Click; protected void Button1_Click(object sender, Ev ...

  8. ASP.NET - Repeater控件删除按钮,点击删除信息

    前台代码: <!--类别信息--> <div id ="newnews" class ="Frm"> <h4>类别管理< ...

  9. ASP.NET -- repeater控件的使用

    转载自网络-原网址[http://blog.csdn.net/haitaodoit/article/details/7021214] repeater绑定数据: protected void Page ...

随机推荐

  1. C#重写Equals方法步骤

    检查传入的参数是否为null, 如果为null,那么返回false, 否则执行步骤2 调用ReferenceEquals查看是否为统一个对象,如果是,那么返回true, 否则执行步骤3 判断两者是否为 ...

  2. mysql忘记密码的处理方式(整理非原创)

    方案1.通过跳过授权的方式 1.修改MySQL的登录设置: # vi /etc/my.cnf 在[mysqld]的中加上:skip-grant-tables . 2.重新启动mysqld # ubun ...

  3. 用phpMyAdmin修改mysql数据库密码

    1初始数据库密码为空. 2第一步,点击phpMyAdmin里的用户选项. 3选择root localhost用户名,点击编辑权限. 4此时会出来修改权限的页面,里面可以设置的选项还是比较多的,暂时不管 ...

  4. 【JAVA编码】 JAVA字符编码系列二:Unicode,ISO-8859,GBK,UTF-8编码及相互转换

    http://blog.csdn.net/qinysong/article/details/1179489 这两天抽时间又总结/整理了一下各种编码的实际编码方式,和在Java应用中的使用情况,在这里记 ...

  5. 伪协议触发onbeforeunload

    根据MSDN描述,IE的onbeforeunload事件触发条件: 简单点来说就是页面URL发生改变时触发: * 关闭浏览器窗口 * 点击后退.前进.刷新.主页 * 点击链接到新页面 * 调用超链接的 ...

  6. windows下配置lamp环境(1)---安装Apache服务器2.2.25

    window下lamp成为wamp; 安装wamp环境的第一步是安装Apache服务器.下面开始安装步骤图文并茂. 一.双击安装包点“next”进行下一步,然后同意协议(这张图没有截):

  7. curl 基本使用简介

    curl是Linux下一个非常著名的下载库,通过这个库,可以很简单的实现文件的下载等操作.看一个简单的例子: #include <curl/curl.h> #include <std ...

  8. ffmpeg编译时freetype2 not found错误

    自己安装的libfreetype2在/usr/local/lib目录下export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:$PKG_CONFIG_PATH

  9. 重启电脑提示Error:no such partition grub rescue

    我的系统是Win7,在使用Ubuntu12.04自带的Wubi.exe安装双系统时,系统提示重新启动计算机,重启后电脑就停留在了黑屏界面并提示: error:no such partition gru ...

  10. 使用Discuz!自带参数防御CC攻击以及原理,修改Discuz X 开启防CC攻击后,不影响搜索引擎收录的方法

    这部份的工作,以前花的时间太少. 希望能产生一定的作用. http://www.nigesb.com/discuz-cc-attacker-defence.html http://bbs.zb7.co ...