jackyrong

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
   看到老外的blog,说asp.net 2.0下的gridview中,当用户在gridview中用鼠标从上到下扫描各行时,起到加亮显示每次移动过的行的一个效果,
用javascript写的,还算简单,记录之
  <asp:repeater id="rptrProducts" runat="server">

<HeaderTemplate>
<div><table BorderColor="Silver" border="0" width="50%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Id</font></STRONG>
</td>
<td bgcolor="Maroon" >
<STRONG><font color="White">Product Name</font></STRONG>
</td>
<td bgcolor="Maroon" >
<STRONG><font color="White">UnitPrice</font></STRONG>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>

<tr id='<%#DataBinder.Eval(Container.DataItem, "ProductID")%>'
onclick='javascript:Repeater_selectRow(this, "<%#DataBinder.Eval(Container.DataItem, "ProductID")%>",true);'
onmouseover='javascript:Repeater_mouseHover(this);'
>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "ProductID")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "ProductName")%></td>
<td bgcolor="" valign="top"><%#DataBinder.Eval(Container.DataItem, "UnitPrice")%></td>
</tr>

</ItemTemplate>
<FooterTemplate>
</table></div>
</FooterTemplate>

</asp:repeater>


之后用个隐藏域来记录每行的ID,以方便在服务端调用
<INPUT id="hdnProductID" type="hidden" value="0" runat="server" NAME="hdnProductID">

然后是javascript实现CSS效果
function Repeater_selectRow(row, ProductId)
{
var hdn=document.Form1.hdnProductID;
hdn.value = ProductId;
if (lastRowSelected != row)
{
if (lastRowSelected != null)
{
lastRowSelected.style.backgroundColor = originalColor;
lastRowSelected.style.color = 'Black'
lastRowSelected.style.fontWeight = 'normal';
}
originalColor = row.style.backgroundColor
row.style.backgroundColor = 'BLACK'
row.style.color = 'White'
row.style.fontWeight = 'normal'
lastRowSelected = row;
}
}
function Repeater_mouseHover(row)
{
row.style.cursor = 'hand';
}
posted on 2007-05-15 19:37  jackyrong的世界  阅读(1366)  评论(2编辑  收藏  举报