WebForm的Repeater以及JS光棒效果

Posted 2020-08-09

Repeater：

HeaderTemplate - 在加载开始执行一遍

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

FooterTemplate - 在加载最后执行一遍

AlternatingItemTemplate - 交替项模板

<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">
<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>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
这是一个大致的写法，我没用VS，以我数据库里的user表为例子，用记事本写的
主要标签就3个，头标签HeaderTemplate，项标签ItemTemplate，足标签FooterTemplate。至于AlternatingItemTemplate在上面没有写
为啥我没写，因为没啥必要，如果添加了AlternatingItemTemplate标签，那么项标签和交替项标签就会交替输出在Repeater里面，可以
通过分别设置样式来实现美化，其实没啥太大的鸟用（至少现在我是这么觉得的）。
至于绑定数据源，和之前WebForm的随笔上写的List的绑定大致相同，稍微简单一点，因为只需要用DateSource定向，然后Bind绑定就行

 

通过某个属性值判断后是否符合条件，将某条数据的样式进行更改。他们管这叫库存预警系统，因为在库存预警中这玩意比较常见

属性扩展的方式，写一个返回string类型的属性，返回的是CSS样式表样式（还有个函数方法的方式然而，嘻嘻）
代码：
public string Red
{
get
{
string end = "";
if (Convert.ToInt32(Age) >= 16)
{
end = "background-color:red;";
}
return end;
}
}
这是在属性类中的扩展属性的代码，返回一个字符串类型的Http的代码然后，很关键！
style="<%#Eval("Red")%>"
通过<%#Eval%>,将Red扩展属性里返回的字符串扔给Style，就大功告成，扔哪？扔项标签的tr里

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

光棒效果：
这个光棒效果吧，用JS写
<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>
代码在上面，我们在下面分析一下逻辑。光棒效果是啥意思，就你鼠标移上去变个颜色，移出来再变回去，就这样。
既然这样，我们就要有两个事件：鼠标移入onmouseover和鼠标移出onmouseout,代码里没大写我这也就不大写了。那首先，我们得获取Class
为tr_item里的所有东西，也就是项标签里的数据。然后呢，我们定义一个oldColor为空，一会用来记录原来的颜色。接着，我们用for循环
把两个事件给项标签里所有的东西都附上。事件的逻辑我就不讲了。

-----------------------------------------------
非表格的信息展示：
1、纯html+css+js制作

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