Cell tooltip in SlickGrid
Some cells in my SlickGrid table have myClass
class.
I added a tooltip for them like this:
$(".myClas开发者_高级运维s").hover(// Mouse enters
function(e) {...},
// Mouse leaves
function() {...});
It works fine, but if I scroll the table to the bottom, and then scroll it back to the top, the tooltip does not appear anymore.
Can someone suggest any workaround ?
Thanks !
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
});
cell, row and item are just examples for how to get to data
try:
$('.myClass').live('mouseover mouseout', function(event) {
// works only on jQuery 1.4.1 and up
if (event.type == 'mouseover') {
// Mouse enters
} else {
// Mouse leaves
}
});
if that doesn't work, I'm guessing .myClass
has been remove so try adding it again in every scrolls...
either way, use the live()
There's a plugin for Slickgrid that will display tooltips for items that are too big to show in a cell (if that's what you're ultimately looking to do): SlickGrid: how to view full text for long cell entries?
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");
}
}
精彩评论