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

87 篇文章 0 订阅
78 篇文章 0 订阅
看到老外的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")%>'
οnclick='javascript:Repeater_selectRow(this, "<%#DataBinder.Eval(Container.DataItem, "ProductID")%>",true);'
οnmοuseοver='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';
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值