Repeater 的使用

<HeaderTemplate></HeaderTemplate>  头模板——在加载开始执行一遍

<FooterTemplate></FooterTemplate>  脚模板——有多少条数据，执行多少遍

<ItemTemplate></ItemTemplate>  项模板——在加载最后执行一遍

<AlternatingItemTemplate></AlternatingItemTemplate>  交替展示模板

  1. 纯HTML+css+js制作
  2. 添加Repeater控件，将数据绑定展示

例子：

以China表为例数据展示：

<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>区域编号</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>
    </form>
</body>

.cs代码

//绑定数据
if (!IsPostBack)
        {
            Repeater1.DataSource = new ChinaStatesData().Select("0001");
            Repeater1.DataBind();
        
        }

China实体类

public class China
{
    public China()
    {
        
    }
    private string code;

    public string Code
    {
        get { return code; }
        set { code = value; }
    }
    private string name;

    public string Name
    {
        get { return name; }
        set { name = value; }
    }
    private string prentcode;

    public string Prentcode
    {
        get { return prentcode; }
        set { prentcode = value; }
    }
}

China数据操作类

public class ChinaData
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public ChinaData()
    {
        conn = new SqlConnection("server=.;database=mydb;user=sa;pwd=123");
        cmd = conn.CreateCommand();
    }
    public List<China> Select(string pcode)
    {
        cmd.CommandText = "select * from ChinaStates where ParentAreaCode=@pcode";
        cmd.Parameters.Clear();
        cmd.Parameters.AddWithValue("@pcode", pcode);

        conn.Open();

        SqlDataReader dr = cmd.ExecuteReader();

        List<China> list = new List<China>();

        if (dr.HasRows)
        {
            while (dr.Read())
            {
                China data = new China();
                data.Code = dr[0].ToString();
                data.Name = dr[1].ToString();
                data.Prentcode = dr[2].ToString();

                list.Add(data);
            }
        }

        conn.Close();

        return list;
    }
}

------------------------------------------------------------------------------

以Users表作数据展示并作库存预警光棒效果:

<body>
    <form id="form1" runat="server">
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <table>
                    <tr>
                        <td>用户名</td>
                        <td>密码</td>
                        <td>昵称</td>
                        <td>性别</td>
                        <td>生日</td>
                        <td>民族</td>
                   </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                <td><%#Eval("UserName") %></td>
                <td><%#Eval("Password") %></td>
                <td><%#Eval("NickName") %></td>
                <td><%#Eval("SexName") %></td>
                <td><%#Eval("birthdayn" )%></td>
                <td><%#Eval("NationName") %></td>
                    </tr>
            </ItemTemplate>
            <FooterTemplate></table>

            </FooterTemplate>
        </asp:Repeater>
    </form>
</body>

Users实体类：

public Users()
    {
        
    }
    private string _UserName;

    public string UserName
    {
        get { return _UserName; }
        set { _UserName = value; }
    }
    private string _Password;

    public string Password
    {
        get { return _Password; }
        set { _Password = value; }
    }
    private string _NickName;

    public string NickName
    {
        get { return _NickName; }
        set { _NickName = value; }
    }
    private bool _Sex;

    public bool Sex
    {
        get { return _Sex; }
        set { _Sex = value; }
    }
    private DateTime _Birthday;

    public DateTime Birthday
    {
        get { return _Birthday; }
        set { _Birthday = value; }
    }

   
    private string _Nation;

    public string Nation
    {
        get { return _Nation; }
        set { _Nation = value; }
    }
    public string SexName
{
    get {
        return this._Sex ? "男" : "女";
    }
    }
    public string NationName
    {
        get
        {
            NationDA da = new NationDA();
            _Nation = da.NationName(this.Nation);
            return _Nation;
        }
    }
    public string birthdayn
    {
        get
        {
            return this.Birthday.ToString("yyyy'年'M'月'd'日'");
        }
    }

UserDA数据操作类：

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

}

Nation实体类：

public class Nation
{
    public Nation()
    {
        
    }
    private string _NationCode;

    public string NationCode
    {
        get { return _NationCode; }
        set { _NationCode = value; }
    }


    private string _NationName;

    public string NationName
    {
        get { return _NationName; }
        set { _NationName = value; }
    }
}

NationDA数据操作类：

public class NationDA
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public NationDA()
    {
        conn = new SqlConnection("server=.;database=Data0617;user=sa;pwd=123");
        cmd = conn.CreateCommand();
    }
    public string NationName(string ncode)
    {
        string name = "";
        cmd.CommandText = "select NationName from Nation where NationCode=@ncode";
        cmd.Parameters.Clear();
        cmd.Parameters.AddWithValue("@ncode",ncode);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            Nation a = new Nation();
            dr.Read();
            name = dr[0].ToString();
            

        }

        conn.Close();
        return name;
    }
}

数据绑定

if (!IsPostBack)
        {
            Repeater1.DataSource = new UserDA().select();
            Repeater1.DataBind();

        }

 -------------------------------------------------------------------------------

库存预警：

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

Users实体类，通过扩展属性

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

光棒效果——鼠标移入移出颜色改变

<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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dreamer666/p/5897565.html