在下面的 asp.net 示例 webform 应用程序(标记和后面的代码以及示例数据)中，我使用 web 方法将 JQuery 工具提示应用于具有 5 列的 gridview 中的一个单元格——要求是“在 gridview 上没有分页”，他们想要滚动 gridview。我示例中的数据源包含从 A 到 Z 的 26 行。我将包含 gridview 的 div 的高度设置为 300px，以便我得到一个滚动条来说明我的问题。工具提示工作正常，除了 1) 当将鼠标悬停在工具提示的单元格(我的示例中的第 1 列)上时，该行会展开并且该行的单元格被推到第 1 列单元格的右侧 - 就像在之后添加了一个幻影单元格细胞(1)。并且... 2)如果您向 gridview 的底部滚动 - 向 zzz 行(其中 aaa thru fff 行不可见)当您将鼠标悬停在第 1 列中的工具提示单元格上时，gridview 行跳回到像 j 行.
我怎样才能防止这种情况发生——行的跳跃？将鼠标悬停在工具提示单元格上时，是否可以防止单元格被推到右边？防止幻影细胞出现？如何解决这个/这些问题？这是 JQuery 问题还是 CSS 问题？
--标记在这里
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication3.WebForm3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>WebForm3</title>
<script src="/Scripts/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="/Content/bootstrap.min.css" />
<script src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "WebForm3.aspx/GetMyStuff",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
$('[id*=GridViewA] tr').each(function (n) {
$(this).find("td:eq(1)").each(function () {
var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : data.d[n - 1].firstN + "<br />" + data.d[n - 1].lastN;
$(this).tooltip({ title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "bottom" });
});
});
},
error: function () { alert("error"); }
});
});
</script>
<style type="text/css">
.colr-tooltip + .tooltip > .tooltip-inner
{
width: 200px;
max-width: 600px !important;
background-color: gainsboro;
color: blue;
text-align: left;
opacity: 1;
filter: alpha(opacity=100);
-moz-box-shadow: 0 0 5px 2px black;
-webkit-box-shadow: 0 0 5px 2px black;
box-shadow: 0 0 5px 2px black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height:300px; width:310px; overflow:auto;">
<asp:GridView ID="GridViewA" runat="server" AutoGenerateColumns="false" ShowFooter="true" AllowPaging="false" >
<Columns>
<asp:BoundField DataField="itm0" HeaderText="itm0A" />
<asp:BoundField DataField="itm1" HeaderText="itm1B" />
<asp:BoundField DataField="itm2" HeaderText="itm2C" />
<asp:BoundField DataField="itm3" HeaderText="itm3D" />
<asp:BoundField DataField="itm4" HeaderText="itm4E" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
--代码隐藏
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication3
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<stuffA> lstA = new List<stuffA>()
{
new stuffA {itm0="a1", itm1="aaa", itm2="apple", itm3="anna smith", itm4 = "aaa"},
new stuffA{itm0="b1", itm1 = "bbb", itm2="banana", itm3="betty white", itm4 = "bbb"},
new stuffA{itm0="c1", itm1 = "ccc", itm2="cow", itm3="charlie sheen", itm4 = "ccc"},
new stuffA{itm0="d1", itm1 = "ddd", itm2="donut", itm3="danielle monet", itm4 = "ddd"},
new stuffA{itm0="e1", itm1 = "eee", itm2="egret", itm3="emelio esteban", itm4 = "eee"},
new stuffA {itm0="f1", itm1="fff", itm2="fapple", itm3="fanna smith", itm4 = "fff"},
new stuffA{itm0="g1", itm1 = "ggg", itm2="gbanana", itm3="gbetty white", itm4 = "ggg"},
new stuffA{itm0="h1", itm1 = "hhh", itm2="hcow", itm3="hcharlie sheen", itm4 = "hhh"},
new stuffA{itm0="i1", itm1 = "iii", itm2="idonut", itm3="idanielle monet", itm4 = "iii"},
new stuffA{itm0="j1", itm1 = "jjj", itm2="jegret", itm3="jemelio esteban", itm4 = "jjj"},
new stuffA {itm0="k1", itm1="kkk", itm2="kapple", itm3="kanna smith", itm4 = "kkk"},
new stuffA{itm0="l1", itm1 = "lll", itm2="lbanana", itm3="lbetty white", itm4 = "lll"},
new stuffA{itm0="m1", itm1 = "mmm", itm2="mcow", itm3="mcharlie sheen", itm4 = "mmm"},
new stuffA{itm0="n1", itm1 = "nnn", itm2="ndonut", itm3="ndanielle monet", itm4 = "nnn"},
new stuffA{itm0="o1", itm1 = "ooo", itm2="oegret", itm3="oemelio esteban", itm4 = "ooo"},
new stuffA {itm0="p1", itm1="ppp", itm2="papple", itm3="panna smith", itm4 = "ppp"},
new stuffA{itm0="q1", itm1 = "qqq", itm2="qbanana", itm3="qbetty white", itm4 = "qqq"},
new stuffA{itm0="r1", itm1 = "rrr", itm2="rcow", itm3="rcharlie sheen", itm4 = "rrr"},
new stuffA{itm0="s1", itm1 = "sss", itm2="sdonut", itm3="sdanielle monet", itm4 = "sss"},
new stuffA{itm0="t1", itm1 = "ttt", itm2="tegret", itm3="temelio esteban", itm4 = "ttt"},
new stuffA{itm0="u1", itm1 = "uuu", itm2="uegret", itm3="uemelio esteban", itm4 = "uuu"},
new stuffA {itm0="v1", itm1="vvv", itm2="vapple", itm3="vanna smith", itm4 = "vvv"},
new stuffA{itm0="w1", itm1 = "www", itm2="wbanana", itm3="wbetty white", itm4 = "www"},
new stuffA{itm0="x1", itm1 = "xxx", itm2="xcow", itm3="xcharlie sheen", itm4 = "xxx"},
new stuffA{itm0="y1", itm1 = "yyy", itm2="ydonut", itm3="ydanielle monet", itm4 = "yyy"},
new stuffA{itm0="z1", itm1 = "zzz", itm2="zegret", itm3="zemelio esteban", itm4 = "zzz"}
};
GridViewA.DataSource = lstA;
GridViewA.DataBind();
}
}
[System.Web.Services.WebMethod]
public static stuffB[] GetMyStuff()
{
List<stuffB> Detail = new List<stuffB> {
new stuffB{firstN="alfred", lastN="Newman"},
new stuffB{firstN="betty", lastN="white"},
new stuffB{firstN="connie", lastN="stevens"},
new stuffB{firstN="davy", lastN="jones"},
new stuffB{firstN="efron", lastN="smith"},
new stuffB{firstN="fff", lastN="Newman"},
new stuffB{firstN="ggg", lastN="white"},
new stuffB{firstN="hhh", lastN="stevens"},
new stuffB{firstN="iii", lastN="jones"},
new stuffB{firstN="jjj", lastN="smith"},
new stuffB{firstN="kkk", lastN="Newman"},
new stuffB{firstN="lll", lastN="white"},
new stuffB{firstN="mmm", lastN="stevens"},
new stuffB{firstN="nnn", lastN="jones"},
new stuffB{firstN="ooo", lastN="smith"},
new stuffB{firstN="ppp", lastN="Newman"},
new stuffB{firstN="qqq", lastN="white"},
new stuffB{firstN="rrr", lastN="stevens"},
new stuffB{firstN="sss", lastN="jones"},
new stuffB{firstN="ttt", lastN="smith"},
new stuffB{firstN="uuu", lastN="Newman"},
new stuffB{firstN="vvv", lastN="white"},
new stuffB{firstN="www", lastN="stevens"},
new stuffB{firstN="xxx", lastN="jones"},
new stuffB{firstN="yyy", lastN="smith"},
new stuffB{firstN="zzz", lastN="smith"}
};
return Detail.ToArray();
}
}
public class stuffA
{
public string itm0 { get; set; }
public string itm1 { get; set; }
public string itm2 { get; set; }
public string itm3 { get; set; }
public string itm4 { get; set; }
}
public class stuffB
{
public string firstN { get; set; }
public string lastN { get; set; }
}
}
最佳答案
好吧，我找到了一个解决方法:
$(this).tooltip({ container: 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });
我添加了 -- container: 'body' -- 到 $(this).tooltip({......})。不过，一个副作用是我丢失了 $(this).addClass("colr-tooltip") 的 css 格式，我将尝试放置 -- container: 'body' -- 看看是否可以不同之处。任何其他建议仍然值得赞赏 - 我如何保持 css 格式并保持 -- container: 'body' -- 似乎提供的稳定性。我的搜索表明 Boostrap 可能是不稳定的罪魁祸首。
关于将鼠标悬停在工具提示单元格上时，JQuery 工具提示会跳转 gridview 中的行 - 如何防止？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39375484/