简介:
Repeater控件是Web 服务器控件中的一个容器控件,它使您可以从页的任何可用数据中创建出自定义列表。
Repeater 控件不具备内置的呈现功能,这表示用户必须通过创建模板为 Repeater 控件提供布局。当该页运行时,
Repeater 控件依次通过数据源中的记录为每个记录呈现一个项。
Repeater控件不具备内置的呈现功能,所以我们得用一些模板来实现他的数据呈现
下表描述了 Repeater 控件支持的模板。
模板属性 说明
ItemTemplate 包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。有多少条数据就执行多少遍
AlternatingItemTemplate 通常,可以使用此模板为交替项创建不同的外观,例如指定一种与在 ItemTemplate 中指定的颜色不同的背景色。一行一个颜色
HeaderTemplate 在开始加载执行一遍
FooterTemplate 在最后加载执行一遍
如果Repeater控件没有指定数据源,它将不显示,如果指定的数据源中没有数据,那么头,脚模板将继续显示。
这个控件主要点:
1,对Repeater几个模板的理解
2,简单实用 Repeater控件实现数据读取以及呈现。
3,实现该控件的嵌套使用
4,实现数据分页
▲:表格展示数据
Users实体类:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;/// <summary>
/// Users 的摘要说明
/// </summary>
public class Users
{
public Users()
{
//
// TODO: 在此处添加构造函数逻辑
//
}
private string _UserName;
/// <summary>
/// 用户名
/// </summary>
public string UserName
{
get { return _UserName; }
set { _UserName = value; }
}
private string _PassWord;
/// <summary>
/// 密码
/// </summary>
public string PassWord
{
get { return _PassWord; }
set { _PassWord = value; }
}
private string _NickName;
/// <summary>
/// 昵称
/// </summary>
public string NickName
{
get { return _NickName; }
set { _NickName = value; }
}
private bool _Sex;
/// <summary>
/// 性别
/// </summary>
public bool Sex
{
get { return _Sex; }
set { _Sex = value; }
}
private DateTime _Birthday;
/// <summary>
/// 生日
/// </summary>
public DateTime Birthday
{
get { return _Birthday; }
set { _Birthday = value; }
}
private string _Nation;
/// <summary>
/// 民族
/// </summary>
public string Nation
{
get { return _Nation; }
set { _Nation = value; }
} //定义性别为string类型的,显示时直接显示男或女,需扩展属性
public string Ssex //前台Eval时 输入的是 Ssex,
{
get//只读取显示出就可
{
return _Sex ? "男" : "女";
}
} //定义生日为string类型的,显示时直接显示....年..月..日
public string Birthday2 //前台Eval时 输入的是 Birthday2,
{
get//同上
{
return _Birthday.ToString("yyyy年MM月dd日");
}
} //在显示表时 显示出年龄 就要在前台加 Age列,现日期 减 生日
public string Age
{
get
{
return (DateTime.Now.Year - this.Birthday.Year).ToString();
}
} public string red
{
get
{
string end = "";
if (Convert.ToInt32( Age) >= )
{
end = "background-color:red;";//不能写错
}
return end; //大于等于16的数据 背景色变红
}
}}
public string NationName
{
get { return new NationDA().Select(this._Nation).NationName; } } public List<Users> Sel {
UserDA里查询所有数据
cmd.CommandText = "select * from Users ";
cmd.Parameters.Clear(); conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
List<Users> list = new List<Users>();
if (dr.HasRows)
{
while (dr.Read())
{ Users da = new Users();
da.UserName=dr[].ToString();
da.PassWord=dr[].ToString();
da.NickName=dr[].ToString();
da.Sex=Convert.ToBoolean( dr[]);
da.Birthday=Convert.ToDateTime( dr[]);
da.Nation= dr[].ToString();
list.Add(da);
}
} conn.Close();
return list;
}
NationDA里显示民族名称的方法:
public string nationnm(string code)
{
cmd.CommandText = "select NationName from Nation where NationCode=@nationcode";
cmd.Parameters.Clear();
cmd.Parameters.Add("@nationcode", code); conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
dr.Read();
return dr[].ToString();
}
else
{
return "汉族";
}
conn.Close();
}
后台代码。cs:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = new UsersDA().Select();
Repeater1.DataBind(); }
}
前台代码 aspx:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title> <style type="text/css"> 写的样式
#tb1 {
width:%;
background-color:#0094ff;
text-align:center;
}
#tr_head {
color:white;
}
.tr_Item {
background-color:white;
}
.tr_Item {
background-color:#e4dede;
}
</style>
</head>
<body>
<form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="tb1">
<tr id="tr_head">
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>性别</td>
<td>生日</td>
<td>年龄</td>
<td>民族</td>
</tr> </HeaderTemplate> <ItemTemplate>
<tr class="tr_Item" style='<%#Eval("red") %>'>大于16的显示红色
<td><%#Eval("UserName") %></td>
<td><%#Eval("Password") %></td>
<td><%#Eval("NickName") %></td>
<td><%#Eval("Ssex") %></td>
<td><%#Eval("Birthday2") %></td>
<td><%#Eval("Age") %></td>
<td><%#Eval("Nation") %></td>
</tr> </ItemTemplate>
<AlternatingItemTemplate> 交替显示
<tr class="tr_Item2"style='<%#Eval("red") %>'>
<td><%#Eval("UserName") %></td>
<td><%#Eval("Password") %></td>
<td><%#Eval("NickName") %></td>
<td><%#Eval("Ssex") %></td>
<td><%#Eval("Birthday2") %></td>
<td><%#Eval("Age") %></td>
<td><%#Eval("Nation") %></td>
</tr>
</AlternatingItemTemplate> <FooterTemplate>
</table>
</FooterTemplate> </asp:Repeater> </form>
</body>
</html>
库存预警:
通过某个属性值判断后,将某条数据的样式进行更改
属性扩展的方式,写一个返回string类型的属性,返回的是CSS样式表样式
属性值不一定非得是展示用
效果图:
JS里的效果:光棒效果;鼠标放上变色,拿走恢复原来的样 <script></script>onmouseout、onmouseout俩事件
库存预警:
通过某个属性值判断后,将某条数据的样式进行更改
属性扩展的方式,写一个返回string类型的属性,返回的是CSS样式表样式
为了让大家知道,属性值不一定非得是展示用
写在head里
<script type="text/javascript">
window.onload = function () {
var items = document.getElementsByClassName("tr_Item");
for (var i = ; 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 = "white";
};
}
}
};
</script>
</style>
<script type="text/javascript">
window.onload = function () {
var items = document.getElementsByClassName("tr_Item");
var oldColor = "";
for (var i = ; i < items.length; i++) {
items[i].onmouseout = function () {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = "yellow";
};
items[i].onmouseout = function () {
this.style.backgroundColor = oldColor; 点到红色也变色
}; } };
</script>