1

在 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>

到目前为止,这运行良好,但我愿意接受更好地处理此问题的建议。

希望这会对其他人有所帮助。

4

1 回答 1

0

您的解决方案看起来不错!

为了保持一致性,我会稍微调整一下,以便使用 jquery 来实现两种悬停行为,例如通过将其添加到现有脚本中:

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);
于 2013-02-08T00:59:38.227 回答