zoukankan      html  css  js  c++  java

  • WebForm Repeater: 重复器

     Repeater控件，可以用来一次显示一组数据项。比如，可以用它们显示一个数据表中的所有行。      
           Repeater控件完全由模板驱动，提供了最大的灵活性，可以任意设置它的输出格式。

     Repeater支持以下5种模板      

    ● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】      
    ● AlternatingItemTemplate : 对交替数据项进行格式设置      
    ● SeparatorTemplate : 对分隔符进行格式设置      
    ● HeaderTemplate : 对页眉进行格式设置 ，在加载开始执行一遍    
    ● FooterTemplate : 对页脚进行格式设置，在加载最后执行一遍     
    以上，英文中使用了Formats item from datasource这样的话，就说明Repeater控件主要是用来对数据进行Format的，控制数据怎么样排列，怎么样显示。      
    Repeater必须使用的是Itemtemplate，其它的类型模板按需添加。

    例：

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .tb1 {
             100%;
        }

        .trh {
            background-color: blue;
            color: white;
            text-align: center;
            height: 50px;
        }

        .trb {
            text-align: center;
            height: 30px;
        }

            .trb:hover {
                background-color: #808080;
            }

        .trb1 {
            text-align: center;
            height: 30px;
            background-color: #ffd800;
        }

            .trb1:hover {
                background-color: #808080;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <table class="tb1">
                    <tr class="trh">                    
                        <td>用户名</td>
                        <td>密码</td>
                        <td>昵称</td>
                        <td>性别</td>
                        <td>生日</td>
                        <td>民族</td>
                        <td>班级</td>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr class="trb">  
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("Pass") %></td>
                    <td><%#Eval("NickName") %></td>
                    <td><img height='30' src="<%#Eval("seximage") %>" /></td>
                    <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                    <td style="<%#Eval("red")%>"><%#Eval("NationName") %></td>
                    <td><%#Eval("ClassName") %></td>
                </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <tr class="trb1">                     
                    <td><%#Eval("UserName") %></td>
                    <td><%#Eval("PassWord") %></td>
                    <td><%#Eval("NickName") %></td>
                    <td>
                        <img height='30' src="<%#Eval("seximage") %>" /></td>
                    <td><%#Eval("Birthday","{0:yyyy年MM月dd日}") %></td>
                    <td style="<%#Eval("red")%>"><%#Eval("NationName") %></td>
                    <td><%#Eval("ClassName") %></td>
                </tr>

            </AlternatingItemTemplate>
            <FooterTemplate></table></FooterTemplate>
        </asp:Repeater>
    </form>
</body>
</html>
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class main : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Repeater1.DataSource = new UsersData().select();
        Repeater1.DataBind();
    }
}
    后台
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Nation 的摘要说明
/// </summary>
public class Nation
{
    public Nation()
    {
        //
        // TODO: 在此处添加构造函数逻辑
        //
    }
    public string Code { get; set; }
    public string Name { get; set; }
}
    Nation
    using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

/// <summary>
/// NationData 的摘要说明
/// </summary>
public class NationData
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public NationData()
    {
        conn = new SqlConnection("server=.;database=Data0928;user=sa;pwd=123");
        cmd = conn.CreateCommand();
    }
    public List<Nation> Select()
    {
        List<Nation> list = new List<Nation>();   
     cmd.CommandText = "select *from Nation";
      
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                Nation n = new Nation();
                n.Code = dr[0].ToString();
                n.Name = dr[1].ToString();

                list.Add(n);
            }
        }
        conn.Close();
        return list;
    }
    public List<Nation> select()
    {
        List<Nation> list = new List<Nation>();
        cmd.CommandText = "select *from Class";

        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                Nation n = new Nation();
                n.Code = dr[0].ToString();
                n.Name = dr[1].ToString();

                list.Add(n);
            }
        }
        conn.Close();
        return list;
    }
}
    NationData
    using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

/// <summary>
/// Users 的摘要说明
/// </summary>
public class Users
{
     SqlConnection conn = null;
        SqlCommand cmd = null;

        public Users()
        {
            conn = new SqlConnection("server=.;database=Data0928;user=sa;pwd=123");
            cmd = conn.CreateCommand();
        }
    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; }
    }
    public string Pass
    {
        get
        {
            string p = "";
            if (Password == "123456")
                p = "******";
                return p;
        }
    }
    public string Nickname { get; set;}
    public bool Sex { get; set; }
    public string seximage
    {
        get
        {
            string src = "";
            if (Sex)
                src = "showsm.png";
            else
                src = "showsw.png"; 
                
            return src;
        }
    }
    public DateTime Birthday{get;set;}
    public string Nation { get; set; }
    public string red
    {
        get
        {
            string yellow = "";
            if (NationName == "满族")
                yellow = "background-color:red;";
            return yellow;
        }
    }
    public string Class { get; set;}
    public string ClassName
    {
        get
        {
            string end = "<无班级>";

            cmd.CommandText = "select *from Class where ClassCode = @a";
            cmd.Parameters.Clear();
            cmd.Parameters.AddWithValue("@a", Class);
            conn.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                dr.Read();
                end = dr["ClassName"].ToString();
            }
            conn.Close();
            return end;
        }
    }
    public string NationName
    {
        get
        {
            string end = "<未填>";
            cmd.CommandText = "select *from Nation where NationCode = @a";
            cmd.Parameters.Clear();
            cmd.Parameters.AddWithValue("@a", Nation);
            conn.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                dr.Read();
                end = dr["NationName"].ToString();
            }
            conn.Close();

            return end;
        }
    }
}
    Users
    using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

/// <summary>
/// UsersData 的摘要说明
/// </summary>
public class UsersData
{
    SqlConnection conn = null;
    SqlCommand cmd = null;
    public UsersData()
    {
        conn = new SqlConnection("server=.;database=Data0928;user=sa;pwd=123");
        cmd = conn.CreateCommand();
    }
    /// <summary>
    /// 用户验证
    /// </summary>
    /// <param name="uname">用户名验证</param>
    /// <param name="pwd">密码验证</param>
    /// <returns></returns>
    public bool Select(string uname, string pwd)
    {
        bool yanzheng = false;
        cmd.CommandText = "select * from Users where UserName=@a and PassWord=@b";
        cmd.Parameters.Clear();
        cmd.Parameters.Add("@a", uname);
        cmd.Parameters.Add("@b", pwd);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            yanzheng = true;
        }
        conn.Close();
        return yanzheng;
    }
    /// <summary>
    /// 添加
    /// </summary>
    /// <param name="u"></param>
    /// <returns></returns>
    public bool insert(Users u)
    {
        bool ok = false;

        cmd.CommandText = "insert into Users values(@a,@b,@c,@d,@e,@f,@g)";
        cmd.Parameters.Clear();
        cmd.Parameters.AddWithValue("@a", u.UserName);
        cmd.Parameters.AddWithValue("@b", u.Password);
        cmd.Parameters.AddWithValue("@c", u.Nickname);
        cmd.Parameters.AddWithValue("@d", u.Sex);
        cmd.Parameters.AddWithValue("@e", u.Birthday);
        cmd.Parameters.AddWithValue("@f", u.Nation);
        cmd.Parameters.AddWithValue("@g", u.Class);
        conn.Open();
        try
        {
            cmd.ExecuteNonQuery();
            ok = true;
        }
        catch
        { }
        conn.Close();
        return ok;
    }
    /// <summary>
    /// 查询是否有此用户
    /// </summary>
    /// <param name="username"></param>
    /// <returns></returns>
    public bool bselect(string username)
    {
        bool has = false;
        cmd.CommandText = "select *from Users where UserName = @a";
        cmd.Parameters.Clear();
        cmd.Parameters.Add("@a", username);

        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
            has = true;

        conn.Close();
        return has;
    }
    /// <summary>
    /// 查询所有信息
    /// </summary>
    /// <returns></returns>
    public List<Users> select()
    {
        List<Users> flist = new List<Users>();
        cmd.CommandText = "select *from users";
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                Users u = new Users();
                u.UserName = dr["UserName"].ToString();
                u.Password = dr["PassWord"].ToString();
                u.Nickname = dr["NickName"].ToString();
                u.Sex = Convert.ToBoolean(dr["Sex"]);
                u.Birthday = Convert.ToDateTime(dr["Birthday"]);
                u.Nation = dr["Nation"].ToString();
                u.Class = dr["Class"].ToString();
                flist.Add(u);
            }
        }
        conn.Close();
        return flist;
    }
}
    UsersData

    光棒效果

          意思是，当鼠标放上的时候，改变其属性，比如：背景色，边框颜色，边框样式等

          方法：js代码实现，用到两个事件，分别是：onmouseover（鼠标放上）和onmouseout（鼠标离开）

    1、不论是正常显示的还是预警显示的，当鼠标放上时，背景色变为黄色；鼠标离开，回复原来的颜色。

    </style>
    <script >
        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>
</head>
<body>
    前台

    2、除预警显示红色不变外，当鼠标放上时，背景色变为黄色；鼠标离开，回复原来的颜色。

    </style>
    <script >
        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 = oldColor;
                    }
                }
            }
        }
    </script>
    View Code

    Repeater控件的事件处理

          Repeater控件有以下事件：      
                  ● DataBinding : Repeater控件绑定到数据源时触发      
                  ● ItemCommand : Repeater控件中的子控件触发事件时触发      
                  ● ItemCreated : 创建Repeater每个项目时触发  
                  ● ItemDataBound : Repeater控件的每个项目绑定数据时触发  
  • 相关阅读:
    canvas的基本用法
    h5新增属性
    jquery中遍历
    git版本控制器
    bootstrap-datetimepicker时间插件
    layer.load的使用
    ajax请求json中的数据
    h5中input的request属性提示文字字段
    layUI
    v-show v-if 的使用
  • 原文地址：https://www.cnblogs.com/shadow-wolf/p/6237353.html
Copyright © 2011-2022 走看看