zoukankan html css js c++ java

asp.net repeater控件操作

　 Repeater控件和DataList控件，可以用来一次显示一组数据项。比如，可以用它们显示一个数据表中的所有行。
　　Repeater控件完全由模板驱动，提供了最大的灵活性，可以任意设置它的输出格式。
　　DataList控件也由模板驱动，和Repeater不同的是，DataList默认输出是HTML表格，DataList将数据源中的记录输出为HTML表格一个个的单元格。

Repeater支持以下5种模板
      ● ItemTemplate : 对每一个数据项进行格式设置 (必须的添加项)
      ● AlternatingItemTemplate : 对交替数据项进行格式设置
      ● SeparatorTemplate : 对分隔符进行格式设置
      ● HeaderTemplate : 对页眉进行格式设置
      ● FooterTemplate : 对页脚进行格式设置

　Repeater控件有以下事件：
      ● DataBinding : Repeater控件绑定到数据源时触发
      ● ItemCommand : Repeater控件中的子控件触发事件时触发
      ● ItemCreated : 创建Repeater每个项目时触发
      ● ItemDataBound : Repeater控件的每个项目绑定数据时触发

table.tabData{border-collapse: collapse;border: 1px solid #9CF;text-align:center;}   
table.tabData thead td,table.set_border th{font-weight:bold;background-color:White;}   
table.tabData tr:nth-child(even){background-color:#EAF2D3;}   
table.tabData td,table.border th{border:1px solid #C3C3C3;text-align:center;}

table画横线样式表

 <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <table class="tabData">
                <tr class="tr_head">
                    <th style=" 200px; text-align: center;">
                        县
                    </th>
                    <th style=" 200px; text-align: center;">
                        乡
                    </th>
                     <th style=" 200px; text-align: center;">
                        村
                    </th>
                    <th style=" 200px; text-align: center;">
                        查看/修改
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#FFFFF;":"#fcf3f4"%>'
                onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
                <td>
                    <%#Eval("XianID")%>
                </td>
                 <td>
                    <%#GetNameByID(Eval("XiangID"))%>
                </td>
                <td>
                    <%#Eval("strName")%>
                </td>
                <td>
                    <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
                </td>
                <%-- <td><input type="button" value="删除" onclick="FunDelete(<%#Eval("ID") %>)" /></td>--%>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <!--底部模板-->
            </table>
            <!--表格结束部分-->
        </FooterTemplate>
    </asp:Repeater>

repeater 绑定示例文件

　　同时需要在后台绑定repeater的数据源

　　Container.ItemIndex为当前行的索引，从0开始

　　style='background-color: <%#(Container.ItemIndex%2==0)?"#FFFFF;":"#fcf3f4"%>' 设置了repeater的隔行变色

　　onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)" 设置了repeater的鼠标悬浮变色

js方法如下(colorName为页面中的一个隐藏的input标签，用于保存onmouseover时的颜色值)

　　function change_colorOver(e) {
    　　var oldColor = e.style.backgroundColor;
    　　document.getElementById("colorName").value = oldColor;
    　　e.style.backgroundColor = "#b9bace";
　　}
　　function change_colorOut(e) {
   　　 e.style.backgroundColor = document.getElementById("colorName").value;
　　}

</script>

嵌套Repeater示例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.BasicData.Data.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //表格鼠标悬停换色
        function change_colorOver(e) {
            var oldColor = e.style.backgroundColor;
            document.getElementById("colorName").value = oldColor;
            e.style.backgroundColor = "#b9bace";
        }
        function change_colorOut(e) {
            e.style.backgroundColor = document.getElementById("colorName").value;
        }
        //显示和隐藏子菜单
        function Ctoggle(obj) {
            if (obj.alt == "open") {
                obj.alt = "close";
                obj.src = "../../images/minus.gif";
                $(obj).parent().parent().next().fadeIn();
            } else {
                obj.alt = "open";
                obj.src = "../../images/plus.gif";
                $(obj).parent().parent().next().fadeOut();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:Repeater ID="R1" runat="server" onitemdatabound="R1_ItemDataBound">
        <HeaderTemplate>
            <table class="tabData">
                <tr class="tr_head">
                    <th style=" 200px; text-align: center;">
                        县
                    </th>
                    <th style=" 200px; text-align: center;">
                        乡
                    </th>
                    <th style=" 200px; text-align: center;">
                        查看/修改
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#ccc;":"#fcf3f4"%>'
                onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
                <td>
               <img alt="open" src="../../images/plus.gif" onclick="Ctoggle(this)" />    <%#Eval("XianID")%>
                </td>
                 <td>
                    <%#Eval("strName")%>
                </td>
                <td>
                    <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
                </td>
               
            </tr>
           <tr style="display:none">
               <td colspan="3">
                   <asp:Repeater ID="R2" runat="server" >
                      
                       <ItemTemplate>
                       <table class="tabData">
                           <tr style='background-color: <%#(Container.ItemIndex%2==0)?"#ccc;":"#fcf3f4"%>'
                               onmouseover="change_colorOver(this)" onmouseout="change_colorOut(this)">
                               <td style="100px"></td>
                               <td style="100px;">
                                   <%#Eval("XiangID")%>
                               </td>
                               <td style="200px;">
                                   <%#Eval("strName")%>
                               </td>
                               <td style="200px;">
                                   <input type="button" value="查看/修改" onclick="ShowFrm(<%#Eval("ID") %>)" />
                               </td>
                           </tr>
                       </ItemTemplate>
                       <FooterTemplate>
                           <!--底部模板-->
                           </table>
                           <!--表格结束部分-->
                       </FooterTemplate>
                   </asp:Repeater>
               </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <!--底部模板-->
            </table>
            <!--表格结束部分-->
        </FooterTemplate>
    </asp:Repeater>
    </div>
    <div id="divhidd" style=" 100px; height:100px; background-color:#aaa; display:none;"></div>
    </form>
    <%--定义背景色的隐藏域--%>
    <input type="hidden" id="colorName" value="" />
</body>
</html>

前台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;

namespace Web.BasicData.Data
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindData();
            }
        }

        public void BindData()
        {
            StringBuilder strSql = new StringBuilder();

            strSql.Append("  SELECT A.ID, B.strName AS XianID,A.strName FROM dbo.BD_Address_Xiang A INNER JOIN dbo.BD_Address_Xian B ON A.XianID=B.ID");
            DataTable dt = SQLHelper.ExecuteDataTable(strSql.ToString());
            if (dt != null && dt.Rows.Count != 0)
            {
                this.R1.DataSource = dt.DefaultView;
                this.R1.DataBind();
            }
        }

        protected void R1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                Repeater rep = e.Item.FindControl("R2") as Repeater;
                DataRowView rowv = (DataRowView)e.Item.DataItem;
                int XiangID = Convert.ToInt32(rowv["ID"]);
                StringBuilder strSql = new StringBuilder();

                strSql.Append("  SELECT A.ID,B.strName AS XiangID,A.strName AS strName");
                strSql.Append("  FROM dbo.BD_Address_Cun A INNER JOIN dbo.BD_Address_Xiang B ON A.XiangID=B.ID");
                strSql.Append("  WHERE B.ID="+XiangID);
                DataTable dt = SQLHelper.ExecuteDataTable(strSql.ToString());
                if (dt != null && dt.Rows.Count != 0)
                {
                    rep.DataSource = dt.DefaultView;
                    rep.DataBind();
                }
            }
        }
    }
}

后台代码

后台：启用外层Repeater的ItemDataBound事件，在ItemDataBound事件中找到内层的Repeater，并绑定内层的Repeater

前台：外层的Repeater的ItemTemplate分为两行；第一行绑定一个数据表的数据信息，和添加一个显示控制按钮

　　　第二行中嵌入内层的Repeater（样式可以独立设置）

　　然后在js文件中添加子菜单的显示和隐藏代码

查看全文

相关阅读:
PHP 使用 GET 传递数组变量
 Java实现蓝桥杯算法训练数据交换
 Java实现蓝桥杯算法训练数据交换
 Java实现蓝桥杯算法训练数据交换
 Java实现蓝桥杯算法训练景点游览
 Java实现蓝桥杯算法训练景点游览
 Java实现蓝桥杯算法训练景点游览
 Java实现蓝桥杯算法训练二进制数数
 Java实现蓝桥杯算法训练二进制数数
 Java实现蓝桥杯算法训练二进制数数

原文地址：https://www.cnblogs.com/eye-like/p/4323765.html

热门文章
ar
apropos
apm
ANALYZE
ALTER USER
ALTER TRIGGER
ALTER TABLE
ALTER SCHEMA
ALTER SEQUENCE
编程语言的语法与语义