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画横线样式表table画横线样式表table画横线样式表table画横线样式表
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;}

//repeater画横线样式表
1 <asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table class="tabData">
<tr class="tr_head">
<th style="width: 200px; text-align: center;">
县
</th>
<th style="width: 200px; text-align: center;">
乡
</th>
<th style="width: 200px; text-align: center;">
村
</th>
<th style="width: 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时的颜色值)

<script>

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

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文件中添加子菜单的显示和隐藏代码