Repeater控件，可以用来一次显示一组数据项。比如，可以用它们显示一个数据表中的所有行。
Repeater控件完全由模板驱动，提供了最大的灵活性，可以任意设置它的输出格式。
Repeater支持以下5种模板
● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】
● AlternatingItemTemplate : 对交替数据项进行格式设置
● SeparatorTemplate : 对分隔符进行格式设置
● HeaderTemplate : 对页眉进行格式设置 ，在加载开始执行一遍
● FooterTemplate : 对页脚进行格式设置，在加载最后执行一遍
以上，英文中使用了Formats item from datasource这样的话，就说明Repeater控件主要是用来对数据进行Format的，控制数据怎么样排列，怎么样显示。
Repeater必须使用的是Itemtemplate，其它的类型模板按需添加。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style> * { margin: 0px; padding: 0px; } #table { 100%; text-align: center; border: 0px; } .tr { background-color: #00ffff; } .td { background-color: #444; } .td:hover { transition: 0.7s; background-color: #00ff90; } .tt { background-color: #00ff90; } .tr:hover { transition: 0.7s; background-color: #444; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table id="table"> <tr id="tt"> <td>编号</td> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>民族</td> <td>班级</td> </tr> </HeaderTemplate> <ItemTemplate> <tr class="tr" style="<%# Eval("Nationa")%>"> <td><%# Eval("ids") %></td> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWordssr")%></td> <td><%#Eval("NickName")%></td> <td> <img src="<%#Eval("sss") %>" /></td> <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td> <td><%#Eval("Nationssr") %></td> <td><%#Eval("Classssr") %></td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr class="td" style="<%# Eval("Nationa")%>"> <td><%# Eval("ids") %></td> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWordssr")%></td> <td><%#Eval("NickName")%></td> <td> <img src="<%#Eval("sss") %>" /> </td> <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td> <td><%#Eval("Nationssr") %></td> <td><%#Eval("Classssr") %></td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Repeater1.DataSource = new UsersData().select(); Repeater1.DataBind(); } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// Users 的摘要说明 /// </summary> public class Users { public Users() { // // TODO: 在此处添加构造函数逻辑 // } public int Ids { get; set; } public string UserName { get; set; } public string PassWord { get; set; } public string NickName { get; set; } public bool Sex { get; set; } public DateTime Birthday { get; set; } public string Nation { get; set; } public string Class { get; set; } public string Sexssr { get { string Sexssr = Sex ? "男" : "女"; return Sexssr; } } public string Nationssr { get { string Nationssr = null; if (Nation == "N001") { Nationssr = "汉族"; } else if (Nation == "N002") { Nationssr = "苗族"; } else if (Nation == "N003") { Nationssr = "满族"; } else if (Nation == "N004") { Nationssr = "藏族"; } return Nationssr; } } public string Classssr { get { string Classssr = null; if (Class == "C001") { Classssr = "基础班"; } else if (Class == "C002") { Classssr = "提高班"; } else if (Class == "C003") { Classssr = "进阶班"; } else if (Class == "C004") { Classssr = "总裁班"; } return Classssr; } } public string PassWordssr { get { String PassWordssr = "****"; if (PassWord != "1234") { PassWordssr = "1234"; } return PassWordssr; } } public String Nationa { get { string Nationa = null; if (Nation == "N004") { Nationa = "background-color: Red;"; } return Nationa; } } public string sss { get { string sss = null; if (Sex) { sss = "20090119095429234.png"; } else { sss = "20090119095429248.png"; } return sss; } } }
using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; using System.Web; /// <summary> /// UsersData 的摘要说明 /// </summary> public class UsersData { SqlConnection conn = null; SqlCommand cmd = null; public UsersData() { // // TODO: 在此处添加构造函数逻辑 // conn = new SqlConnection("server=.;database=data0928;user=sa;pwd=123"); cmd = conn.CreateCommand(); } public List<Users> select() { List<Users> Ulist = new List<Users>(); cmd.CommandText = "select * from Users"; conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { while (dr.Read()) { Users u = new Users(); u.Ids = Convert.ToInt32(dr[0].ToString()); u.UserName = dr[1].ToString(); u.PassWord = dr[2].ToString(); u.NickName = dr[3].ToString(); u.Sex = Convert.ToBoolean(dr[4].ToString()); u.Birthday = Convert.ToDateTime(dr[5].ToString()); u.Nation = dr[6].ToString(); u.Class = dr[7].ToString(); Ulist.Add(u); } } conn.Close(); return Ulist; } }
光棒效果
意思是，当鼠标放上的时候，改变其属性，比如：背景色，边框颜色，边框样式等
方法：js代码实现，用到两个事件，分别是：onmouseover（鼠标放上）和onmouseout（鼠标离开）
1、不论是正常显示的还是预警显示的，当鼠标放上时，背景色变为黄色；鼠标离开，回复原来的颜色。
</style>
<script >
window.onload=function(){
var items = document.getElementsByClassName("tr_Item");
var oldColor = "";注释：存放原来的背景色
for (var i = 0; i < items.length; i++) {
items[i].onmouseover = function () {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = "yellow";
}
items[i].onmouseout = function () {
this.style.backgroundColor = oldColor;
}
}
}
</script>
</head>
<body>
2、除预警显示红色不变外，当鼠标放上时，背景色变为黄色；鼠标离开，回复原来的颜色。
</style>
<script >
window.onload=function(){
var items = document.getElementsByClassName("tr_Item");
for (var i = 0; i < items.length; i++) {
if (items[i].style.backgroundColor != Red) {
items[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
}
items[i].onmouseout = function () {
this.style.backgroundColor = oldColor;
}
}
}
}
</script>
Repeater控件的事件处理
Repeater控件有以下事件：
● DataBinding : Repeater控件绑定到数据源时触发
● ItemCommand : Repeater控件中的子控件触发事件时触发
● ItemCreated : 创建Repeater每个项目时触发
● ItemDataBound : Repeater控件的每个项目绑定数据时触发