首页 > 代码库 > WebForm的Repeater以及JS光棒效果
WebForm的Repeater以及JS光棒效果
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控件,将数据绑定展示
WebForm的Repeater以及JS光棒效果