Repeater与Table的配合使用
table-repeater
<
asp:Repeater id
=
Repeater1 runat
=
"
server
"
>
<
HeaderTemplate
>
<
table width
=
"
100%
"
style
=
"
font: 8pt verdana
"
>
<
tr style
=
"
background-color:DFA894
"
>
<
th
>
First Name
</
th
>
<
th
>
Last Name
</
th
>
</
tr
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
tr
>
<
td
><%
# DataBinder.Eval(Container,
"
DataItem.EmployeeName
"
)
%>
</
td
>
<
td
><%
# DataBinder.Eval(Container,
"
DataItem.PhoneNumber
"
)
%>
</
td
>
</
tr
>
</
ItemTemplate
>
<
AlternatingItemTemplate
>
<
tr
>
<
td bgcolor
=
"
lightblue
"
>
<%
# DataBinder.Eval(Container,
"
DataItem.EmployeeName
"
)
%>
</
td
>
<
td bgcolor
=
"
lightblue
"
>
<%
# DataBinder.Eval(Container,
"
DataItem.PhoneNumber
"
)
%>
</
td
>
</
tr
>
</
AlternatingItemTemplate
>
<
FooterTemplate
>
</
table
>
</
FooterTemplate
>
</
asp:Repeater
>
2
Two
<
table width
=
"
775
"
border
=
"
0
"
cellspacing
=
"
2
"
cellpadding
=
"
0
"
align
=
"
center
"
>
<
tr
>
<
td align
=
"
center
"
height
=
"
25
"
class
=
"
Login1
"
width
=
"
40%
"
>
新闻名称
</
td
>
<
td align
=
"
center
"
class
=
"
Login1
"
>
分类
</
td
>
<
td align
=
"
center
"
class
=
"
Login1
"
>
查看
</
td
>
<
td align
=
"
center
"
class
=
"
Login1
"
width
=
"
170
"
>
添加时间
</
td
>
<
td align
=
"
center
"
class
=
"
Login1
"
width
=
"
100
"
>
编辑
/
删除
</
td
>
</
tr
>
<
asp:Repeater ID
=
"
Repeater1
"
runat
=
"
server
"
>
<
ItemTemplate
>
<
tr
>
<
td align
=
"
left
"
class
=
"
Login2
"
height
=
"
25
"
>
&
nbsp;
&
nbsp;
<
a href
=
"
../View.aspx?id=<%#Eval(
"
id
"
) %>
"
target
=
"
_blank
"
><%
#Eval(
"
Titel
"
)
%></
a
></
td
>
<
td align
=
"
center
"
class
=
"
Login2
"
>
<%
#Eval(
"
Class
"
)
%>
</
td
>
<
td align
=
"
center
"
class
=
"
Login2
"
>
<
a href
=
"
../view.aspx?id=<%#Eval(
"
id
"
) %>
"
target
=
"
_blank
"
>
查看
</
a
></
td
>
<
td align
=
"
center
"
class
=
"
Login2
"
>
<%
#Eval(
"
Time
"
)
%>
</
td
>
<
td align
=
"
center
"
class
=
"
Login2
"
>
<
a href
=
"
EditNews.aspx?id=<%#Eval(
"
id
"
) %>
"
>
编辑
</
a
>
<
asp:LinkButton ID
=
"
LinkButton1
"
CommandName
=
'
<%#Eval("id") %>
'
OnCommand
=
"
DelComm_Click
"
OnClientClick
=
"
return confirm('确定要删除吗?');
"
runat
=
"
server
"
>
删除
</
asp:LinkButton
></
td
>
</
tr
>
</
ItemTemplate
>
</
asp:Repeater
>
</
table
>
3
CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行
1
. 禁止文本换行的CSS: white
-
space:nowrap;
strict mode下在IE7和FF中都正常，以前IE用的word
-
break
、word
-
wrap属性对FF无效。
2
. Repeater控件，交替显示table行的背景颜色，鼠标移动到某一行时用特殊背景显示。
方法purecss给出了很多种，看了一下现在新浪邮箱，使用的也是文章中选择的方法。
repeater控件:
<
asp:Repeater ID
=
"
Repeater1
"
runat
=
"
server
"
>
<
HeaderTemplate
>
<
table
class
=
"
list
"
cellpadding
=
"
0
"
cellspacing
=
"
0
"
>
<
tr
class
=
"
listheader
"
>
<
th
>&
nbsp;
</
th
>
<
th
>
查看
</
th
>
<
th
>
编辑
</
th
>
<
th
>
模板ID
</
th
>
<
th
>
用户编号
</
th
>
<
th
>
描述
</
th
>
<
th
>
状态
</
th
>
<
th
>
控制类
</
th
>
<
th
>
模板内容
</
th
>
</
tr
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
tr
class
=
"
listitem1
"
onmouseover
=
"
this.className='over'
"
onmouseout
=
"
this.className='listitem1'
"
>
<
td
class
=
"
cmdtd
"
>
<
asp:CheckBox ID
=
"
CheckBox1
"
runat
=
"
server
"
/>
<
asp:HiddenField ID
=
"
templateID
"
runat
=
"
server
"
Value
=
'
<%# DataBinder.Eval(Container.DataItem, "ID")%>
'
/>
</
td
>
<
td
class
=
"
cmdtd
"
>
<
asp:ImageButton ID
=
"
cmdView
"
runat
=
"
server
"
ImageUrl
=
"
http://www.cnblogs.com/Skin/default/icon_view.gif
"
CausesValidation
=
"
False
"
OnCommand
=
"
cmdView_Click
"
CommandArgument
=
'
<%# DataBinder.Eval(Container.DataItem, "ID")%>
'
>
</
asp:ImageButton
>
</
td
>
<
td
class
=
"
cmdtd
"
>
<
asp:ImageButton ID
=
"
cmdEdit
"
runat
=
"
server
"
ImageUrl
=
"
http://www.cnblogs.com/Skin/default/icon_edit.gif
"
CausesValidation
=
"
False
"
OnCommand
=
"
cmdEdit_Click
"
CommandArgument
=
'
<%# DataBinder.Eval(Container.DataItem, "ID")%>
'
>
</
asp:ImageButton
>
</
td
>
<
td
><%
# DataBinder.Eval(Container.DataItem,
"
ID
"
)
%></
td
>
<
td
><%
# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,
"
ShortName
"
))
%></
td
>
<
td
><%
# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,
"
LongDescription
"
))
%></
td
>
<
td
><%
# DataBinder.Eval(Container.DataItem,
"
State
"
)
%></
td
>
<
td
><%
# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,
"
AttributeProvider
"
))
%></
td
>
<
td
>
<
textarea id
=
"
Textarea1
"
rows
=
"
3
"
class
=
"
textbox
"
readonly
=
"
readonly
"
cols
=
"
20
"
style
=
"
width:400px;
"
>
<%
# DataBinder.Eval(Container.DataItem,
"
Content.Content
"
)
%>
</
textarea
>
</
td
>
</
tr
>
</
ItemTemplate
>
<
AlternatingItemTemplate
>
<
tr
class
=
"
listitem2
"
onmouseover
=
"
this.className='over'
"
onmouseout
=
"
this.className='listitem2'
"
>
<
td
class
=
"
cmdtd
"
>
<
asp:CheckBox ID
=
"
CheckBox1
"
runat
=
"
server
"
/>
<
asp:HiddenField ID
=
"
templateID
"
runat
=
"
server
"
Value
=
'
<%# DataBinder.Eval(Container.DataItem, "ID")%>
'
/>
</
td
>
<
td
class
=
"
cmdtd
"
>
<
asp:ImageButton ID
=
"
cmdView
"
runat
=
"
server
"
ImageUrl
=
"
http://www.cnblogs.com/Skin/default/icon_view.gif
"
CausesValidation
=
"
False
"
OnCommand
=
"
cmdView_Click
"
CommandArgument
=
'
<%# DataBinder.Eval(Container.DataItem, "ID")%>
'
>
</
asp:ImageButton
>
</
td
>
<
td
class
=
"
cmdtd
"
>
<
asp:ImageButton ID
=
"
cmdEdit
"
runat
=
"
server
"
ImageUrl
=
"
http://www.cnblogs.com/Skin/default/icon_edit.gif
"
CausesValidation
=
"
False
"
OnCommand
=
"
cmdEdit_Click
"
CommandArgument
=
'
<%# DataBinder.Eval(Container.DataItem, "ID")%>
'
>
</
asp:ImageButton
>
</
td
>
<
td
><%
# DataBinder.Eval(Container.DataItem,
"
ID
"
)
%></
td
>
<
td
><%
# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,
"
ShortName
"
))
%></
td
>
<
td
><%
# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,
"
LongDescription
"
))
%></
td
>
<
td
><%
# DataBinder.Eval(Container.DataItem,
"
State
"
)
%></
td
>
<
td
><%
# RenderUtil.FormatString(DataBinder.Eval(Container.DataItem,
"
AttributeProvider
"
))
%></
td
>
<
td
>
<
textarea id
=
"
Textarea1
"
rows
=
"
3
"
class
=
"
textbox
"
readonly
=
"
readonly
"
cols
=
"
20
"
style
=
"
width:400px;
"
>
<%
# DataBinder.Eval(Container.DataItem,
"
Content.Content
"
)
%>
</
textarea
>
</
td
>
</
tr
>
</
AlternatingItemTemplate
>
<
FooterTemplate
>
</
table
>
</
FooterTemplate
>
</
asp:Repeater
>
CSS:
.list
{
border
-
right:solid 1px #
888888
;
border
-
top:solid 1px #
888888
;
}
tr.listheader td,th
{
border
-
left:solid 1px #BBBBBB;
border
-
bottom:solid 1px #BBBBBB;
background
-
color:#E6F6F6;
color:#
444444
;
white
-
space:nowrap;
padding:1px 1px 1px 1px;
font
-
weight:bold;
}
tr.listitem1 td
{
border
-
left:solid 1px #BBBBBB;
border
-
bottom:solid 1px #BBBBBB;
background
-
color:#FFFFFF;
padding:1px 1px 1px 1px;
text
-
indent:1px;
}
tr.listitem2 td
{
border
-
left:solid 1px #BBBBBB;
border
-
bottom:solid 1px #BBBBBB;
background
-
color:#F6F6F6;
padding:1px 1px 1px 1px;
text
-
indent:1px;
}
tr.over td
{
border
-
left:solid 1px #BBBBBB;
border
-
bottom:solid 1px #BBBBBB;
background
-
color:#FEE6BA;
padding:1px 1px 1px 1px;
text
-
indent:1px;
}
.cmdtd
{
text
-
align:center;
}
4
点击Repeater中的button，获取table中item的id，在连接的DataTable中删除数据
================================
在Repeater生成的table中，点击“删除”按钮，能够获取按钮所在的行的索引值，从而找到该行所对应的DataTable中的值，将其删除。更新DataTable！
===================================
1
.Repeater生成table表，设置属性OnItemCommand
=
"
Button2_Click
"
，调用按钮事件的处理过程
<
asp:Repeater ID
=
"
Repeater1
"
runat
=
"
server
"
OnItemCommand
=
"
Button2_Click
"
>
<
HeaderTemplate
>
<
table border
=
"
1
"
>
<
tr
>
<
td
>
用户名称
</
td
>
<
td
>
用户年龄
</
td
>
<
td
>
用户密码
</
td
>
<
td
>
用户邮箱
</
td
>
<
td
>
用户性别
</
td
>
<
td
>
用户爱好
</
td
>
<
td
>
其他
</
td
>
<
td
>
照片
</
td
>
</
tr
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
tr
>
<
td
><%
#Eval(
"
用户名称
"
)
%></
td
>
<
td
><%
#Eval(
"
用户年龄
"
)
%></
td
>
<
td
><%
#Eval(
"
用户密码
"
)
%></
td
>
<
td
><
asp:HyperLink ID
=
"
HyperLink1
"
NavigateUrl
=
'
<%#Eval("用户邮箱")%>
'
runat
=
"
server
"
><%
#Eval(
"
用户邮箱
"
)
%></
asp:HyperLink
></
td
>
<
td
><%
#Eval(
"
用户性别
"
)
%></
td
>
<
td
><%
#Eval(
"
用户爱好
"
)
%></
td
>
<
td
><%
#Eval(
"
其他
"
)
%></
td
>
<
td
><
asp:HyperLink ID
=
"
HyperLink2
"
NavigateUrl
=
'
<%#Eval("照片")%>
'
runat
=
"
server
"
><%
#Eval(
"
照片
"
)
%></
asp:HyperLink
></
td
>
<
td
>
<
asp:Button ID
=
"
Button2
"
runat
=
"
server
"
Text
=
"
删除
"
/></
td
>
</
tr
>
</
ItemTemplate
>
<
AlternatingItemTemplate
>
<
tr style
=
"
background-color : Aqua
"
>
<
td
><%
#Eval(
"
用户名称
"
)
%></
td
>
<
td
><%
#Eval(
"
用户年龄
"
)
%></
td
>
<
td
><%
#Eval(
"
用户密码
"
)
%></
td
>
<
td
><
asp:HyperLink ID
=
"
HyperLink1
"
NavigateUrl
=
'
<%#Eval("用户邮箱")%>
'
runat
=
"
server
"
><%
#Eval(
"
用户邮箱
"
)
%></
asp:HyperLink
></
td
>
<
td
><%
#Eval(
"
用户性别
"
)
%></
td
>
<
td
><%
#Eval(
"
用户爱好
"
)
%></
td
>
<
td
><%
#Eval(
"
其他
"
)
%></
td
>
<
td
><
asp:HyperLink ID
=
"
HyperLink2
"
NavigateUrl
=
'
<%#Eval("照片")%>
'
runat
=
"
server
"
><%
#Eval(
"
照片
"
)
%></
asp:HyperLink
></
td
>
<
td
>
<
asp:Button ID
=
"
Button2
"
runat
=
"
server
"
Text
=
"
删除
"
/></
td
>
</
tr
>
</
AlternatingItemTemplate
>
<
FooterTemplate
>
</
table
>
</
FooterTemplate
>
</
asp:Repeater
>
2
.定义事件
protected
void
Button2_Click(
object
sender, RepeaterCommandEventArgs e)
{
dt.Rows.Remove(dt.Rows[ e.Item .ItemIndex]);
Repeater1.DataSource
=
dt;
Repeater1.DataBind();
}
3
.运行按钮“删除”，删除DataTable中的数据