首页 > 代码库 > WebForm Repeater: 重复器
WebForm Repeater: 重复器
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 { width: 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=http://www.mamicode.com/"<%#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=http://www.mamicode.com/"<%#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控件的每个项目绑定数据时触发
WebForm Repeater: 重复器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。