在下面的asp.net示例webform应用程序（后面跟着标记和代码以及示例数据）中，我使用webmethod将JQuery工具提示应用于5列中gridview的一个单元格 - 其要求是＆ ＃34;没有分页＆＃34;在gridview上他们想要滚动gridview。我的示例中的数据源包含从A到Z的26行。我将包含gridview的div的高度设置为高度300px，以便我得到一个滚动条来说明我的问题。工具提示工作正常，除了1）当悬停在工具提示的单元格上时（我的样本中的第1列），该行展开，该行的单元格被推到第1列单元格的右侧 - 就像之后添加了一个幻像单元格一样细胞（1）。并且... 2）如果你滚动到gridview的底部 - 朝着zzz行（其中aaa到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; }
}
}
答案 0 :(得分：0)
好吧，我找到了一个解决方法：
$(this).tooltip({ container: 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });
我添加了 - 容器：＆＃39; body＆＃39; - $（this）.tooltip（{.......}）。但是，一方面的影响是，我丢失了$（this）.addClass（＆＃34; colr-tooltip＆＃34;）的css格式，我将尝试放置 - container：＆＃39; body＆＃ 39; - 看看是否有所作为。任何其他建议仍然赞赏 - 如何保持CSS格式并保持稳定 - 容器：＆＃39; body＆＃39; - 似乎提供。我的搜索表明，Boostrap可能是不稳定的罪魁祸首。
答案 1 :(得分：0)
结果我可以嵌入一个包含所有属性的html表，如下所示 - 有点像内联css
var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : "<table style='color:blue;background-color:lightgreen;width:100px;text-align:left;'><tr><td>" + data.d[n - 1].firstN + "</td></tr><tr><td>" + data.d[n - 1].lastN + "</td></tr></table>";
答案 2 :(得分：0)
（后代）我发现还有一种方法来修复工具提示跳跃的东西，仍然可以使用我原来的css类
/$(this).tooltip({ 'data-container': 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });
而不是容器：＆＃39; body＆＃39;我将其替换为＆＃39; data-container＆＃39;：＆＃39; body＆＃39;
请注意，我必须打包数据容器＆＃39;在这个版本的单引号中。