【问题标题】:Hover over row event not firing in ag-grid悬停在行事件上未在 ag-grid 中触发
【发布时间】:2018-08-19 20:57:24
【问题描述】:

每次用户将鼠标悬停在 ag-grid 行上时,我都会尝试触发一个事件。

cellMouseOver 是似乎提供此功能的事件 (src : https://www.ag-grid.com/javascript-grid-events/)

这是我的 plunkr:

https://plnkr.co/edit/hgZp4pftfqjqpN7WghKA?p=preview

问题是每次将行悬停在 cellMouseOver 事件上时不会触发。在这种情况下尝试cellMouseOver 事件是否正确?如果不是,当用户将鼠标悬停在一行上时应该如何触发事件?

plunkr 源代码:

example.js:

// specify the columns
var columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

// specify the data
var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

// let the grid know which columns and what data to use
var gridOptions = {
    columnDefs: columnDefs,
    cellMouseOver : cellMouseOver,
    rowData: rowData,
    onGridReady: function (params) {
        params.api.sizeColumnsToFit();
    }
};

function cellMouseOver(event){
  console.log(event)  
}

// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {

    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');

    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid@17.0.0/dist/ag-grid.min.js"></script></head>
<body>

<div id="myGrid" style="height: 131px; width:600px;" class="ag-theme-balham"></div>

    <script src="example.js"></script>
</body>
</html>

【问题讨论】:

    标签: javascript jquery hover ag-grid


    【解决方案1】:

    不应该是onCellMouseOver: cellMouseOver吗?

    【讨论】:

      猜你喜欢
      • 2020-09-08
      • 1970-01-01
      • 2020-11-02
      • 2015-08-30
      • 2020-04-06
      • 1970-01-01
      • 1970-01-01
      • 2011-01-10
      • 2021-01-14
      相关资源
      最近更新 更多