SOURCE

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan'.split(',');
  var data = [];
  for (var i = 0; i < 20; i++) {
    data.push({
    	id: i,
      country: countries[i % countries.length],
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
      overdue: i % 4 == 0
    });
  }
  
  // bind a grid to the data
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: new wijmo.collections.CollectionView(data, {
	  	groupDescriptions: [ 'country' ] // group data by country
	  }),
    formatItem: function(s, e) {  // add 'button' to country cells
    	if (e.panel == s.cells) {
      	if (s.columns[e.col].binding == 'country') {
        	var html = '<span class="my-button">&#x2b24;</span> ' + e.cell.innerHTML;
        	e.cell.innerHTML = html;
        }
			}
    }
  });

	// monitor and log mouse moves
	var logEl = document.getElementById('log');
  var tt = new wijmo.Tooltip(),
  	  tip = '';
  theGrid.addEventListener(theGrid.hostElement, 'mousemove', function(e) {
  	var ht = theGrid.hitTest(e);
    var logText = wijmo.format('panel <b>{cellType}</b> row <b>{row}</b> col <b>{col}</b>', {
    	cellType: wijmo.grid.CellType[ht.cellType],
      row: ht.row,
      col: ht.col
    });
    if (e.target.classList.contains('my-button')) {
    	logText += ' (fake button!)';
    } else if (e.target.tagName == 'INPUT' && e.target.type == 'checkbox') {
    	logText += ' (checkbox!)';
    } else if (ht.panel == theGrid.cells) {
    	if (theGrid.rows[ht.row] instanceof wijmo.grid.GroupRow) {
	    	logText += ' (group row)';
      } else {
	    	logText += ' (value: <b>' + theGrid.cells.getCellData(ht.row, ht.col, true) + '</b>)';
      }
    }
    
    	// update tooltip      
		if (logText != tip) {
    	tip = logText;
      tt.show(e.target, tip, new wijmo.Rect(e.clientX, e.clientY, 20, 20));
		}
    
    logEl.innerHTML = logText;
  });
  
   theGrid.addEventListener(theGrid.hostElement, 'mouseleave', function(e) {
     tt.hide();
     tip = '';
   })
                            
}

<div class="container">

  <h1>
    鼠标事件</h1>
  <p>
    要处理鼠标事件，请将一个侦听器添加到网格的hostElement中，并使用hitTest方法来确定点击哪个网格面板和单元格.</p>
  <p>
    下面的表格有一个附加到'mousemove'事件的处理程序，并显示有关鼠标下的元素的信息.</p>
  <div id="log">
    please move the mouse over the grid
  </div>
  <div id="theGrid">
  </div>
  
</div>

.wj-flexgrid {
  max-height: 220px; 
  margin:10px;
}
#log {
  font-style: italic;
  text-align: center;
  margin-bottom: 10px;
  opacity: .5;
}
.my-button {
  opacity: .5;
  margin: 0 6px;
}
.my-button:hover {
  color: orange;  
}
body {
   margin-bottom: 24px;
}