在 GridView 的每一行(使用 TemplateField)中,我想显示将用于控制该行中数据的图像按钮。然后,当用户第一次将鼠标悬停在 GridView 行上,然后当用户将鼠标悬停在特定按钮上时,我想更换按钮的图像。
我可以使用 CSS 和图像超链接轻松完成此悬停功能,但是在使用图像超链接时,我无法引发任何服务器端事件来处理编辑特定行。
过去,我使用 ImageButtons 而不是图像超链接。我将 CommandName 参数添加到 ImageButtons 中,然后在代码中处理 GridView RowCommand:
<asp:ImageButton ID="btnSelect" CommandName="select" runat="server" ImageUrl="~/images/iconSelect1.png" />
为了在悬停时更改 ImageButton 图像,我使用了 Javascript:
<asp:ImageButton ID="btnSelect" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" runat="server" ImageUrl="~/images/iconSelect1.png" />
但是,在这种情况下,当用户第一次将鼠标悬停在 GridView 行本身上时,我还需要替换 ImageButton 图像。
总而言之,当用户将鼠标悬停在 GridView 行上时,该行上的 ImageButtons 都会将 image1 交换为 image2。然后,当用户将鼠标悬停在特定的 ImageButton 上时,其图像将从 image2 切换到 image 3。
提前感谢您对最佳方法的任何建议。
- - - - - - - - - - - - - - - - - - -编辑 - - - - - - -----------------------------------------
不确定这是否是最好的方法,但我找到了一个使用 jQuery 的潜在解决方案:
<ItemTemplate>
<div class="gvRow">
<asp:ImageButton ID="btnSelect" CssClass="btnSelect" runat="server" ImageUrl="~/images/iconSelect1.png" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" />
</div>
</ItemTemplate>
<script type="text/javascript">
$('.gvRow').hover(
function () {
$(this).find(".btnSelect").attr("src", "../images/iconSelect2.png");
},
function () {
$(this).find(".btnSelect").attr("src", "../images/iconSelect1.png");
}
);
</script>
到目前为止,这运行良好,但我愿意接受更好地处理此问题的建议。
希望这会对其他人有所帮助。