SlickGrid 'mouseleave' event not fired whe

问题:

I have a slickgrid that, in the 'onMouseEnter' event, I do the following:

• change the underlying css for the row in question
• call grid.invalidateRow()
• call grid.render()

These latter two calls are necessary for the new css classes to be reflected. However, I then need to capture the onMouseLeave event, and it is not fired when I move my mouse away from the cell (or row), presumably because the call to invalidate/render has placed a new DOM element under my mouse, and it's no longer the one I initially "entered."

So I have two questions:

1. Is there another way to have the new css classes for a given cell be rendered without calling invalidateRow/render?
2. If not, is there another way to do this and still have the onMouseLeave event fired?

回答1:

One option is to use the setCellCssStyles function.

grid.onMouseEnter.subscribe(function(e, args){
    var cell = grid.getCellFromEvent(e),
        param = {},
        columnCss = {};

      for(index in columns){
          var id = columns[index].id;
          columnCss[id] = 'my_highlighter_style'
      }
      param[cell.row] = columnCss
      args.grid.setCellCssStyles("row_highlighter", param);
  })

So the above changes the background-color of every cell of the row that has been moused into. In my fiddle, the mouseLeave subscription performs a simple console.log to ensure it is still firing.

---

Edit: fixed the external resource usages in the fiddle for cross-browser support