ag-grid点击行跳转页面 如何为onRowClicked事件传递行数据参数

第一种实现方案是否属于不良实践 #

是，该方案属于不推荐的不良实践，核心原因如下：

• ag-grid默认开启虚拟滚动，超出可视区域的行DOM会被自动销毁重建，手动绑定的事件监听会随DOM销毁失效，需要反复绑定/解绑，数据量大时性能损耗远高于内置事件
• 手动绑定依赖固定的DOM类名和结构，ag-grid版本更新、配置调整都可能导致DOM结构变化，对应的选择器会直接失效，维护成本极高
• 跳过ag-grid封装的事件机制直接操作DOM，无法和ag-grid内部的事件冒泡、行选中、编辑等逻辑兼容，容易触发未知冲突

第二种方案的实现方法 #

ag-grid的onRowClicked回调传入的event参数已经内置了当前点击行的完整数据，直接通过event.data即可获取整行的字段对象，取对应列的字段值即可实现你的需求，示例代码如下：

var gridOptions = {
    // 其余grid配置项保持不变
    onRowClicked: event => {
        // event.data为当前点击行的完整原始数据对象
        // 将targetField替换为你需要取值的列对应的字段名即可
        const targetCellValue = event.data.targetField
        // 执行你的自定义逻辑，比如跳转URL，或者调用你的myFunction方法
        window.location.href = targetCellValue
        // myFunction(targetCellValue)
    }
};

如果不清楚目标列对应的字段名，可以先在回调中加入console.log(event.data)打印行数据结构，确认对应字段的key后替换即可。

内容的提问来源于stack exchange，提问作者Morph