<HeaderTemplate></HeaderTemplate> 头模板——在加载开始执行一遍
<FooterTemplate></FooterTemplate> 脚模板——有多少条数据，执行多少遍
<ItemTemplate></ItemTemplate> 项模板——在加载最后执行一遍
<AlternatingItemTemplate></AlternatingItemTemplate> 交替展示模板
- 纯HTML+css+js制作
- 添加Repeater控件，将数据绑定展示
例子：
以China表为例数据展示：
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table style="background-color: navy; text-align: center;">
<tr style="color: white; padding: 10px;">
<td>区域编号</td>
<td>区域名称</td>
<td>区域父级编号</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color: #e0e0e0;">
<td><%#Eval("AreaCode") %></td>
<td><%#Eval("AreaName") %></td>
<td><%#Eval("ParentAreaCode") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
.cs代码
//绑定数据 if (!IsPostBack) { Repeater1.DataSource = new ChinaStatesData().Select("0001"); Repeater1.DataBind(); }
China实体类
public class China { public China() { } private string code; public string Code { get { return code; } set { code = value; } } private string name; public string Name { get { return name; } set { name = value; } } private string prentcode; public string Prentcode { get { return prentcode; } set { prentcode = value; } } }
China数据操作类
public class ChinaData { SqlConnection conn = null; SqlCommand cmd = null; public ChinaData() { conn = new SqlConnection("server=.;database=mydb;user=sa;pwd=123"); cmd = conn.CreateCommand(); } public List<China> Select(string pcode) { cmd.CommandText = "select * from ChinaStates where ParentAreaCode=@pcode"; cmd.Parameters.Clear(); cmd.Parameters.AddWithValue("@pcode", pcode); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); List<China> list = new List<China>(); if (dr.HasRows) { while (dr.Read()) { China data = new China(); data.Code = dr[0].ToString(); data.Name = dr[1].ToString(); data.Prentcode = dr[2].ToString(); list.Add(data); } } conn.Close(); return list; } }
------------------------------------------------------------------------------
以Users表作数据展示并作库存预警光棒效果:
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table>
<tr>
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>性别</td>
<td>生日</td>
<td>民族</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("UserName") %></td>
<td><%#Eval("Password") %></td>
<td><%#Eval("NickName") %></td>
<td><%#Eval("SexName") %></td>
<td><%#Eval("birthdayn" )%></td>
<td><%#Eval("NationName") %></td>
</tr>
</ItemTemplate>
<FooterTemplate></table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
Users实体类：
public Users() { } private string _UserName; public string UserName { get { return _UserName; } set { _UserName = value; } } private string _Password; public string Password { get { return _Password; } set { _Password = value; } } private string _NickName; public string NickName { get { return _NickName; } set { _NickName = value; } } private bool _Sex; public bool Sex { get { return _Sex; } set { _Sex = value; } } private DateTime _Birthday; public DateTime Birthday { get { return _Birthday; } set { _Birthday = value; } } private string _Nation; public string Nation { get { return _Nation; } set { _Nation = value; } } public string SexName { get { return this._Sex ? "男" : "女"; } } public string NationName { get { NationDA da = new NationDA(); _Nation = da.NationName(this.Nation); return _Nation; } } public string birthdayn { get { return this.Birthday.ToString("yyyy'年'M'月'd'日'"); } }
UserDA数据操作类：
public class UserDA { SqlConnection conn = null; SqlCommand cmd = null; public UserDA() { conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123"); cmd = conn.CreateCommand(); } public List<Users> select() { List<Users> list = new List<Users>(); cmd.CommandText = "select * from Users"; conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { while (dr.Read()) { Users data = new Users(); data.UserName = dr[0].ToString(); data.Password = dr[1].ToString(); data.NickName = dr[2].ToString(); data.Sex =Convert.ToBoolean( dr[3]) ; data.Birthday = Convert.ToDateTime(dr[4]); data.Nation = dr[5].ToString(); list.Add(data); } } conn.Close(); return list; } }
Nation实体类：
public class Nation { public Nation() { } private string _NationCode; public string NationCode { get { return _NationCode; } set { _NationCode = value; } } private string _NationName; public string NationName { get { return _NationName; } set { _NationName = value; } } }
NationDA数据操作类：
public class NationDA { SqlConnection conn = null; SqlCommand cmd = null; public NationDA() { conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123"); cmd = conn.CreateCommand(); } public string NationName(string ncode) { string name = ""; cmd.CommandText = "select NationName from Nation where NationCode=@ncode"; cmd.Parameters.Clear(); cmd.Parameters.AddWithValue("@ncode",ncode); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); if (dr.HasRows) { Nation a = new Nation(); dr.Read(); name = dr[0].ToString(); } conn.Close(); return name; } }
数据绑定
if (!IsPostBack) { Repeater1.DataSource = new UserDA().select(); Repeater1.DataBind(); }
-------------------------------------------------------------------------------
库存预警：
<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>
Users实体类，通过扩展属性
public string Age { get { return (DateTime.Now.Year - this._Birthday.Year).ToString(); } } public string Red { get { string end = ""; if (Convert.ToInt32(Age) >= 16) { end = "background-color:red;"; } return end; } }
光棒效果——鼠标移入移出颜色改变
<style type="text/css"> #tb1 { 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>