ag-grid onRowClicked行点击事件

用户点ag-grid表格时响应的事件,返回点击的行数据和鼠标事件。

onRowClicked代码

var gridOptions = {
    columnDefs: colData,
    rowData: rowData,
    enableCellChangeFlash: true,
    //************************行内点击触发事件****************
    onRowClicked: function(event) {
        //event.data 选中的行内数据,event.event 为鼠标事件,等其他。可以log自己看一下
          var itxst = JSON.stringify(event.data);
          alert(itxst);
    },
    onGridReady: function () {
        gridOptions.api.sizeColumnsToFit();
    },
    defaultColDef: {
        enableRowGroup: true,
        enablePivot: true,
        enableValue: true,
        sortable: true,
    }
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#itxst');
    new agGrid.Grid(eGridDiv, gridOptions);
});

在线试一试

完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid onRowClicked例子</title>
    <script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    点击表格试试看
    <div id="itxst" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
        //定义列
        var colData = [
            { headerName: '名称', field: 'name', 'pinned': 'left' },
            { headerName: '剩余', field: 'col2' },
            { headerName: '销量', field: 'col3' },
        ];

        //行数据
        var rowData = [];
        //模拟数据
        for (var i = 1; i < 10; i++) {
            rowData.push({ name: 'YO-' + i, col2: 612 * i, col3: 321 * i });
        }

        //将列和数据赋给gridOptions
        var gridOptions = {
            columnDefs: colData,
            rowData: rowData,
            enableCellChangeFlash: true,
            //行内点击触发事件
            onRowClicked: function (event) {
                //event.data 选中的行内数据,event.event 为鼠标事件,等其他。可以log自己看一下
                console.log('a row was clicked', event);
                var itxst = JSON.stringify(event.data);
                alert(itxst);
            },
            onGridReady: function () {
                gridOptions.api.sizeColumnsToFit();
            },
            defaultColDef: {
                enableRowGroup: true,
                enablePivot: true,
                enableValue: true,
                sortable: true,
            }
        };
        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#itxst');
            new agGrid.Grid(eGridDiv, gridOptions);
        });

    </script>
</body>
</html>