asp.net 2.0下gridview中加亮移动行

来源:互联网 发布:糯米网络 编辑:程序博客网 时间:2024/05/22 00:36

看到老外的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.backgroundColorrow.style.backgroundColor = 'BLACK'row.style.color = 'White'row.style.fontWeight = 'normal'lastRowSelected = row;}}
function Repeater_mouseHover(row){row.style.cursor = 'hand';}
原创粉丝点击