Repeater控件 ---表格展示数据

简介：

Repeater控件是Web 服务器控件中的一个容器控件，它使您可以从页的任何可用数据中创建出自定义列表。

Repeater 控件不具备内置的呈现功能，这表示用户必须通过创建模板为 Repeater 控件提供布局。当该页运行时，

Repeater 控件依次通过数据源中的记录为每个记录呈现一个项。

Repeater控件不具备内置的呈现功能，所以我们得用一些模板来实现他的数据呈现

　　下表描述了 Repeater 控件支持的模板。
　　模板属性说明

　　ItemTemplate 　　包含要为数据源中每个数据项都要呈现一次的 HTML 元素和控件。有多少条数据就执行多少遍

　　AlternatingItemTemplate 通常，可以使用此模板为交替项创建不同的外观，例如指定一种与在 ItemTemplate 中指定的颜色不同的背景色。一行一个颜色

　　HeaderTemplate 　　在开始加载执行一遍

　　FooterTemplate 　　在最后加载执行一遍

　
　　如果Repeater控件没有指定数据源，它将不显示，如果指定的数据源中没有数据，那么头，脚模板将继续显示。

　　这个控件主要点：

　　1，对Repeater几个模板的理解

　　2，简单实用 Repeater控件实现数据读取以及呈现。
　　3，实现该控件的嵌套使用
　　4，实现数据分页

▲：表格展示数据

Users实体类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Users 的摘要说明
/// </summary>
public class Users
{
    public Users()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }
    private string _UserName;
    /// <summary>
    /// 用户名
    /// </summary>
    public string UserName
    {
        get { return _UserName; }
        set { _UserName = value; }
    }
    private string _PassWord;
    /// <summary>
    /// 密码
    /// </summary>
    public string PassWord
    {
        get { return _PassWord; }
        set { _PassWord = value; }
    }
    private string _NickName;
    /// <summary>
    /// 昵称
    /// </summary>
    public string NickName
    {
        get { return _NickName; }
        set { _NickName = value; }
    }
    private bool _Sex;
    /// <summary>
    /// 性别
    /// </summary>
    public bool Sex
    {
        get { return _Sex; }
        set { _Sex = value; }
    }
    private DateTime _Birthday;
    /// <summary>
    /// 生日
    /// </summary>
    public DateTime Birthday
    {
        get { return _Birthday; }
        set { _Birthday = value; }
    }
    private string _Nation;
    /// <summary>
    /// 民族
    /// </summary>
    public string Nation
    {
        get { return _Nation; }
        set { _Nation = value; }
    }


    //定义性别为string类型的，显示时直接显示男或女，需扩展属性
    public string Ssex    //前台Eval时 输入的是 Ssex，
    {
        get//只读取显示出就可
        {
            return _Sex ? "男" : "女";
        }
    }


    //定义生日为string类型的，显示时直接显示....年..月..日
    public string Birthday2  //前台Eval时 输入的是 Birthday2，
    {
        get//同上
        {
            return _Birthday.ToString("yyyy年MM月dd日");
        }
    }


    //在显示表时 显示出年龄  就要在前台加 Age列，现日期 减 生日
    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;   //大于等于16的数据 背景色变红
        }
    }

}

View Code

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

    } public List<Users> Sel    {

  UserDA里查询所有数据    
        cmd.CommandText = "select * from Users ";
        cmd.Parameters.Clear();
        
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        List<Users> list = new List<Users>();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                
                Users da = new Users();
                da.UserName=dr[0].ToString();
                da.PassWord=dr[1].ToString();
                da.NickName=dr[2].ToString();
                da.Sex=Convert.ToBoolean( dr[3]);
                da.Birthday=Convert.ToDateTime( dr[4]);
                da.Nation= dr[5].ToString();
                list.Add(da);
            }
        }

        conn.Close();
       return list;
    }

NationDA里显示民族名称的方法：

 public string nationnm(string code)
    {
        cmd.CommandText = "select NationName from Nation where NationCode=@nationcode";
        cmd.Parameters.Clear();
        cmd.Parameters.Add("@nationcode", code);

        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            dr.Read();
            return dr[0].ToString();
        }
        else
        {
            return "汉族";
        }
        conn.Close();
    }

后台代码。cs:

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

前台代码 aspx:

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <style type="text/css"> 写的样式
        #tb1 {
        width:100%;
        background-color:#0094ff;
        text-align:center;
        }
        #tr_head {
        color:white;
        }
        .tr_Item {
        background-color:white;
        }
        .tr_Item {
        background-color:#e4dede;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">


        <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" style='<%#Eval("red") %>'>大于16的显示红色
                   <td><%#Eval("UserName") %></td>
                   <td><%#Eval("Password") %></td>
                   <td><%#Eval("NickName") %></td>
                   <td><%#Eval("Ssex") %></td>
                   <td><%#Eval("Birthday2") %></td>
                   <td><%#Eval("Age") %></td>
                   <td><%#Eval("Nation") %></td>
               </tr>

           </ItemTemplate>
            <AlternatingItemTemplate> 交替显示
              <tr class="tr_Item2"style='<%#Eval("red") %>'>      
                   <td><%#Eval("UserName") %></td>
                   <td><%#Eval("Password") %></td>
                   <td><%#Eval("NickName") %></td>
                   <td><%#Eval("Ssex") %></td>
                   <td><%#Eval("Birthday2") %></td>
                   <td><%#Eval("Age") %></td>
                   <td><%#Eval("Nation") %></td>
               </tr>
            </AlternatingItemTemplate>

            <FooterTemplate>
                </table>
            </FooterTemplate>

        </asp:Repeater>



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

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

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

属性值不一定非得是展示用

效果图：

JS里的效果：光棒效果；鼠标放上变色，拿走恢复原来的样 <script></script>onmouseout、onmouseout俩事件

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

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

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

写在head里

 <script type="text/javascript">
        window.onload = function () {
            var items = document.getElementsByClassName("tr_Item");
            for (var i = 0; i < items.length; i++) {
                if (items[i].style.backgroundColor != "red") {判断点到红色不变黄
                    items[i].onmouseover = function () {  移入时
                        this.style.backgroundColor = "yellow";
                    };
                    items[i].onmouseout = function () {  移出时
                        this.style.backgroundColor = "white";
                    };
                }
            }
        };

</script>

 </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].onmouseout = function () {
                    oldColor = this.style.backgroundColor;
                    this.style.backgroundColor = "yellow";
                };
                items[i].onmouseout = function () {
                    this.style.backgroundColor = oldColor;     点到红色也变色
                };

            }


        };
    </script>

Repeater控件 ---表格展示数据

推荐阅读