SlickGrid 中的单元格工具提示答案

【问题标题】：Cell tooltip in SlickGridSlickGrid 中的单元格工具提示
【发布时间】：2011-02-16 05:18:44
【问题描述】：

我的 SlickGrid 表中的一些单元格有 myClass 类。

我像这样为他们添加了一个工具提示：

$(".myClass").hover(// Mouse enters
                    function(e) {...},
                    // Mouse leaves
                    function() {...});

它工作正常，但如果我将表格滚动到底部，然后将其滚动回顶部，工具提示将不再出现。

有人可以提出任何解决方法吗？

谢谢！

【问题讨论】：

标签： javascript jquery slickgrid

【解决方案1】：

1. include ../slick/plugins/slick.autotooltips.js
ex)     

    <script src="/jsp/slick/plugins/slick.autotooltips.js"></script>

2. add code

    $.get(url,function(data){

    ...

    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells:
    true }) );

    ...


more...

use jquery.ui.tooltips

ex)
<link rel="stylesheet" href="/jsp/jui/themes/base/jquery.ui.tooltip.css"/>
<script src="/jsp/jui/ui/jquery.ui.core.js"></script>
<script src="/jsp/jui/ui/jquery.ui.widget.js"></script>
<script src="/jsp/jui/ui/jquery.ui.position.js"></script>
<script src="/jsp/jui/ui/jquery.ui.tooltip.js"></script>

open slick.grid.js and modify function 2436(line)

    function setActiveCellInternal(newCell, opt_editMode) {
      if (activeCellNode !== null) {
        makeActiveCellNormal();
        $(activeCellNode).removeClass("active");
        try{$( document ).tooltip("destroy");}catch(e){}    // <<<< add code
        try{$( document ).tooltip();}catch(e){}         // <<<< add code
        if (rowsCache[activeRow]) {
          $(rowsCache[activeRow].rowNode).removeClass("active");
        }
      }

【讨论】：

最好解释一下为什么您的代码是正确答案以及解决方案在哪里。

【解决方案2】：

有一个用于 Slickgrid 的插件，它会显示因太大而无法在单元格中显示的项目的工具提示（如果这是您最终想要做的）： SlickGrid: how to view full text for long cell entries?

【讨论】：

【解决方案3】：

        grid.onMouseEnter.subscribe(function(e, args) {
            var cell = grid.getCellFromEvent(e)
            var row = cell.row
            var item = dataView.getItem(row);
            //do whatever
        });

        grid.onMouseLeave.subscribe(function(e, args) {
            //do whatever
        });

单元格、行和项目只是如何获取数据的示例

【讨论】：

【解决方案4】：

尝试：

$('.myClass').live('mouseover mouseout', function(event) {
 // works only on jQuery 1.4.1 and up
  if (event.type == 'mouseover') {
    // Mouse enters 
  } else {
    // Mouse leaves
  }
});

如果这不起作用，我猜.myClass 已被删除，所以请尝试在每个卷轴中重新添加它...

无论哪种方式，请使用live()

【讨论】：

太棒了！它有效:) 有一件事困扰着我：我在文档中看到“.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序”。那么，为什么用mouseenter 替换mouseover 不起作用？我检查并发现如果我输入mouseenter 而不是mouseover，那么function(event) {..} 也会在event.type = "mouseover" 被调用。这是为什么？感谢您的帮助！
live() 已弃用，分别。它在 jQuery 1.9 中不再存在。