zoukankan html css js c++ java

WebForm Repeater使用

Repeater：

HeaderTemplate：在加载开始执行一遍

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

FooterTemplate ：在加载最后执行一遍

AlternatingItemTemplate ：交替项模板

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<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>UserName</td>
                        <td>PsssWord</td>
                        <td>NickName</td>
                        <td>Sex</td>
                        <td>Birthday</td>
                        <td>Nation</td>
                    </tr>
             </HeaderTemplate>
            <ItemTemplate>
                <tr style="background-color:yellow">
                    <td><%#Eval("UserName")%></td>
                    <td><%#Eval("PassWord")%></td>
                     <td><%#Eval("NickName")%></td>
                    <td><%#Eval("Sex")%></td>
                     <td><%#Eval("birthday")%></td>
                    <td><%#Eval("Nation")%></td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
              </table>
            </FooterTemplate>            
        </asp:Repeater>
        



    </form>
</body>
</html>

数据绑定

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = new UsersDA().Select();
            Repeater1.Users：

/// <summary>
    /// 性别
    /// </summary>
    public bool Sex
    {
        get { return _Sex; }
        set { _Sex = value; }
    }

    public string SexStr
    {
        get { return _Sex ? "男" : "女"; }
    }


    private DateTime _Birthday;

    /// <summary>
    /// 生日
    /// </summary>
    public DateTime Birthday
    {
        get { return _Birthday; }
        set { _Birthday = value; }
    }

    public string BirthdayStr
    {
        get { return _Birthday.ToString("yyyy年MM月dd日"); }
    }


    private string _Nation;

    /// <summary>
    /// 民族
    /// </summary>
    public string Nation
    {
        get { return _Nation; }
        set { _Nation = value; }
    }

    public string NationName
    {
        get { return new NationData().Select(this._Nation).NationName; }

    }

    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;
        }
    }

数据操作类

public class UsersDA
{
    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;
    }

}

库存预警

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

属性扩展的方式，写一个返回string类型的属性，返回的是CSS样式表样式

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

<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>

光棒效果

鼠标移入改变颜色

<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>

查看全文

相关阅读:
HTML Window.document对象
 HTML JavaScript的DOM操作
 HTML 运算符、类型转换
 HTML JavaScript简介
 js对象学习
 理解MySQL数据库覆盖索引
 mysql 索引2
mysql 索引
 Extjs 使用图标字体来美化按钮)
MySql数据类型问题

原文地址：https://www.cnblogs.com/zzzy0828/p/5898150.html