当鼠标悬停在工具提示单元格上时，JQuery工具提示会在gridview中跳转行-如何防止

在下面的asp.net样例webform应用程序(标记和代码后面跟着下面的样例数据)，我应用一个JQuery工具提示，使用webmethod，一个单元格在一个gridview有5列，其要求是"无分页"在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; }
    }
}

嗯，我找到了一个解决办法:

$(this).tooltip({ container: 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });

我说——容器:"身体",(这).tooltip美元 ({.......}).一个副作用是，我失去了$(this). addclass (" color -tooltip")的css格式，我将尝试——container: 'body'的位置，看看这是否有什么不同。任何其他的建议仍然赞赏-我如何保持css格式和保持稳定-容器:'body' -似乎提供。我的搜索表明Boostrap可能是不稳定的罪魁祸首。

结果是，我可以嵌入一个html表格，其中包含如下所有属性——有点像inline 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>";

(为了后代)我又找到了一种方法来修复工具提示跳转的问题，并且仍然能够使用我原来的css类

/$(this).tooltip({ 'data-container': 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });

将container: 'body'替换为'data-container': 'body'

请注意，在这个版本中我必须将'data-container'用单引号括起来。

相关内容

最新更新

热门标签：