Question

我正在做学校工作并需要一些帮助，我希望在“相关信息”ImageField列中的图像是在悬停时放大的DataBound。这是我的代码：

    <div style="height:200px; width: 610px; overflow: auto;">
                <asp:GridView ID="GV_insView" runat="server"
            AutoGenerateColumns="False"
            CssClass="Grid" AlternatingRowStyle-CssClass="alt" Width="511px">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
            <Columns>
                <asp:BoundField HeaderText="Customer ID" DataField="NRIC" />
                <asp:BoundField HeaderText="Insurance Type" DataField="insType" />
                <asp:BoundField HeaderText="Date Filed" DataField="dateFiled" DataFormatString="{0:dd/MM/yyyy}"/>
            <asp:ImageField HeaderText="Relevant Information" DataImageUrlField="relInfo" ControlStyle-Width="100" ControlStyle-Height="100"> 
              </asp:ImageField>
            </Columns>
        </asp:gridview>
                    </div>

Answer 1

您必须编写自定义JavaScript函数和CSS来支持此功能。

请查看下面的示例代码，了解如何执行此操作。

<script type="text/javascript">
    $(function () {
        $("[id*=GridView1] td").hover(function () {
            $("td", $(this).closest("tr")).addClass("hover_row");
        },function(){
            $("td", $(this).closest("tr")).removeClass("hover_row");
        });
    });
</script>

和CSS你将使用转换的CSS3属性在悬停时放大。

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    td
    {

    }
    .hover_row
    {
        -ms-transform: scale(2, 3); /* IE 9 */
        -webkit-transform: scale(2, 3); /* Safari */
         transform: scale(2, 3);
    }
</style>

要获得完整的解决方案，您可以查看此链接，该链接是上述信息的来源。 Change row color on GridView Hover ASP Snippets

只有一个boundfield有一些特定的CSS你可以尝试这个。

<asp:BoundField DataField="Count" HeaderText="Count">
    <ItemStyle CssClass="yourclass"></ItemStyle>
</asp:BoundField>

这样，Image的所有boundfield都将获得悬停的CSS类。

希望这有帮助。

ASP.NET C＃如何在悬停时放大GridView DataBound imageField图片？

1 个答案: