Question

我做了如下网格视图：

   <asp:GridView runat="server" id="grvCommandes" AutoGenerateColumns="False" RowStyle-CssClass="row_dd"  BackColor="#bbddff"  Font-Names="Verdana" BorderWidth="3px" OnRowDeleting="btnSupprimer_click" OnRowDataBound="RowDataBound" EmptyDataText="Cette requête ne retourne aucune ligne..." Width="1600px">
    <Columns>

           <asp:BoundField DataField="NO_COMM" ItemStyle-Width="120px" HeaderText="Code Comm."/>
           <asp:BoundField DataField="NO_DA" ItemStyle-Width="120px" HeaderText="No de D.A."/>

           <asp:BoundField DataField="UnitAdm" ItemStyle-Width="120px" HeaderText="Un. Adm."/>
           <asp:BoundField DataField="CODE_ART" ItemStyle-Width="120px" HeaderText="Code d'Article"/>
           <asp:BoundField DataField="desc_abr" ItemStyle-Width="390px" HeaderText="Description"/>

           <asp:TemplateField HeaderStyle-CssClass="hideIT">
            <HeaderStyle CssClass="hideIT"></HeaderStyle>
            <ItemStyle CssClass="hideIT" />
            <ItemTemplate>
                <div class="dataDiv" data-desc="<%# Eval("DESC_ART") %>"></div>
            </ItemTemplate>
        </asp:TemplateField>

           <asp:BoundField DataField="Date_Crea" ItemStyle-Width="120px" HeaderText="Création"/>
           <asp:BoundField DataField="Date_Recep" ItemStyle-Width="120px" HeaderText="Émission"/>


           <asp:BoundField DataField="QTE_COMM" ItemStyle-Width="80px" HeaderText="Qtée Comm."  ItemStyle-HorizontalAlign="Right"/>
           <asp:BoundField DataField="QTE_REC" ItemStyle-Width="80px" HeaderText="Qtée Reçu"  ItemStyle-HorizontalAlign="Right"/>
           <asp:BoundField DataField="QTE_INV_ACH" ItemStyle-Width="80px" HeaderText="Qtée Ach."  ItemStyle-HorizontalAlign="Right"/>
           <asp:BoundField DataField="QTE_INV_INV" ItemStyle-Width="80px" HeaderText="Qtée Inv."  ItemStyle-HorizontalAlign="Right"/>


    </Columns>
</asp:GridView>

我想要一个“鼠标悬停”事件，因为在gridview中是一个简短的描述，如果鼠标悬停在线上时显示完整的描述将会很方便。

所以用Google搜索并且：http://codepedia.info/gridview-row-mouseover-show-detail-data-in-floating-div-asp-net-c-jquery/

在脚本中添加了这个东西以及所需的CSS：

<script>

    $(".row_dd").on("mouseenter", function (e) {
        var self = $(this).find(".dataDiv");
        var DESC_ART = self.attr("data-desc");


        $("#dd_desc").html(DESC_ART);


        var x_value = e.pageX;
        var y_value = e.pageY;
        $("#detailedData").css({
            "top": y_value,
            "left": x_value
        }).show();
    });

    $(".row_dd").on("mouseleave", function (e) {
        $("#detailedData").hide();
    });


</script>

我添加在页面底部：

<div id="detailedData" style="display: none;">
  <dl> 
    <dt>DESC_ART: </dt> <dd id="dd_desc"></dd>

  </dl>
</div>

现在我不知道为什么，鼠标悬停的线就像预期的那样，但是div不会出现。我不知道这个JQuery代码是什么...

编辑：

将这些添加到我的项目中：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-1.4.1.min.js"></script>

但是当鼠标结束时，我仍然无法从我的数据库中看到整个描述...

Answer 1

感谢大家的帮助......我不知道我是否喜欢JQuery，我最终使用的是asp.net样式工具提示：

    protected void RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType != DataControlRowType.DataRow)
            return;
        e.Row.ToolTip = ((CommandeETDA)e.Row.DataItem).DESC_ART;
    }

不太方便，但至少它现在可以使用

Jquery onmouseover for asp.net web form gridview

1 个答案: