jquery onmouseover for asp.net web form gridview答案

【问题标题】：Jquery onmouseover for asp.net web form gridviewjquery onmouseover for asp.net web form gridview
【发布时间】：2016-10-03 19:55:35
【问题描述】：

我做了一个如下的gridview：

   <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 中有一个简短的描述，如果鼠标悬停在线时显示完整的描述会很方便。

于是在谷歌上搜索了一下：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>

现在我不知道为什么，鼠标悬停的行按预期变为 withe，但 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>

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

【问题讨论】：

查看您的代码，它应该可以工作。您是否在浏览器控制台中收到任何客户端错误？
当你说div没有出现时，你指的是哪一个？ GridView 中的那个（.dataDiv 类）还是页面底部的那个（id detailData）？我试过你的代码，它工作得很好，但是你 GridView 中的<div> 没有内容，所以它会显示为空白。试试<div class="dataDiv" data-desc="<%# Eval("DESC_ART") %>">Hover Here!</div>
@Antoine：请检查您的浏览器控制台是否有任何错误？并确保 jquery 库包含在您的网页中。
Eval("DESC_ART") 的评估结果是什么？如果您将代码替换为硬编码值（例如data-desc="TEST"），您的代码是否有效？
您可能使用的是旧版本的 jQuery。查看您的脚本标签，您似乎正在加载两个（旧）版本的 jQuery，它们可能与.on 发生冲突和不兼容。当前版本是 3.1.1。见code.jquery.com

标签： c# jquery asp.net gridview webforms

【解决方案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;
    }

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

【讨论】：