Repeater:
HeaderTemplate - 在加载开始执行一遍
ItemTemplate - 有多少条数据,执行多少遍
FooterTemplate - 在加载最后执行一遍
AlternatingItemTemplate - 交替项模板
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lianxi.aspx.cs" Inherits="lianxi" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table style="text-align:center"> <tr style="color:white;padding:10px;"> <td>UserName</td> <td>PsssWord</td> <td>NickName</td> <td>Sex</td> <td>Birthday</td> <td>Nation</td> </tr> </HeaderTemplate> <ItemTemplate> <tr style=" line-height: 1.5 !important;">"> <td><%#Eval("UserName")%></td> <td><%#Eval("PassWord")%></td> <td><%#Eval("NickName")%></td> <td><%#Eval("Sex")%></td> <td><%#Eval("birthday")%></td> <td><%#Eval("Nation")%></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </form> </body> </html>
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Repeater1.DataSource = new UsersDA().Select(); Repeater1.DataBind(); } }
库存预警:
通过某个属性值判断后,将某条数据的样式进行更改
属性扩展的方式,写一个返回string类型的属性,返回的是CSS样式表样式
/// <summary> /// 性别 /// </summary> public bool Sex { get { return _Sex; } set { _Sex = value; } } public string SexStr { get { return _Sex ? "男" : "女"; } } private DateTime _Birthday; /// <summary> /// 生日 /// </summary> public DateTime Birthday { get { return _Birthday; } set { _Birthday = value; } } public string BirthdayStr { get { return _Birthday.ToString("yyyy年MM月dd日"); } } private string _Nation; /// <summary> /// 民族 /// </summary> public string Nation { get { return _Nation; } set { _Nation = value; } } public string NationName { get { return new NationData().Select(this._Nation).NationName; } } public string Age { get { return (DateTime.Now.Year - this._Birthday.Year).ToString(); } } public string Red { get { string end = ""; if (Convert.ToInt32(Age) >= 16) { end = ""; } return end; } }
<ItemTemplate> <tr class="tr_Item" style="<%#Eval("Red")%>"> <td><%#Eval("UserName") %></td> <td><%#Eval("PassWord") %></td> <td><%#Eval("NickName") %></td> <td><%#Eval("SexStr") %></td> <td><%#Eval("BirthdayStr") %></td> <td><%#Eval("Age") %></td> <td><%#Eval("NationName") %></td> </tr> </ItemTemplate>
光棒效果
鼠标移入改变颜色
<style type="text/css"> #tb1 { width: 100%; background-color: navy; text-align: center; } #tr_head { color: white; } .tr_Item { background-color: white; } .tr_Item2 { background-color: #e0e0e0; } </style> <script type="text/javascript"> 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>