Repeater

Repeater：

HeaderTemplate - 在加载开始执行一遍 头部模版

ItemTemplate - 有多少条数据，执行多少遍 向模版

FooterTemplate - 在加载最后执行一遍 脚模版

AlternatingItemTemplate - 交替项模板
<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>

库存预警：
通过某个属性值判断后，将某条数据的样式进行更改

属性扩展的方式，写一个返回string类型的属性，返回的是CSS样式表样式
public string Red
{
get
{
string end = "";
if (Convert.ToInt32(Age) >= 16)
{
end = "background-color:red;";
}
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>

为了让大家知道，属性值不一定非得是展示用

方法的方式：

光棒效果：
<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>
布局
去除3毫米边框：
padding 0px;
margin 0px;

JS
<script type="text/javascript">
var items = document.getElementsByClassName("item");

var hei = items[0].offsetHeight;

document.getElementById("main").style.height = (hei + 10) * Math.ceil(items.length / 4) + 'px';

</script>
获取每一个的高度
展示信息：
<div id="main">

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<%#Eval("UserName") %><br />
<%#Eval("PassWord") %><br />
<%#Eval("NickName") %>
</div>
</ItemTemplate>
</asp:Repeater>

</div>

Repeater可以套Repeater，Repeater嵌套。
-----------------------------------------------
非表格的信息展示：
1、纯HTML+css+js制作

2、添加Repeater控件，将数据绑定展示