zoukankan      html  css  js  c++  java
  • 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控件,将数据绑定展示

  • 相关阅读:
    mui 单页面下拉刷新
    phpStorm格式化代码快捷键
    mui 子页面切换父页面底部导航
    Java连接Mysql的基本用法
    string替换所有指定字符串(C++)
    MySql与Java的时间类型
    MYSQL中防止插入重复记录的解决方案(无重复值更新)
    Java数据库连接池封装与用法
    Java中数据库连接池原理机制的详细讲解(转)
    Fedora14使用yum安装mysql
  • 原文地址:https://www.cnblogs.com/blueteasama/p/5898314.html
Copyright © 2011-2022 走看看