您可以使用Ag-Grid的rowClassRules
属性来实现在点击行或该行的任何单元格时突出显示特定行。在rowClassRules
中定义一个规则,当点击行或该行的任何单元格时,将特定的CSS类应用于该行。
以下是一个示例代码:
rowClassRules
属性:// 初始化Ag-Grid
var gridOptions = {
columnDefs: [
// 列定义...
],
rowData: [
// 行数据...
],
rowClassRules: {
// 当点击行或该行的任何单元格时,应用.highlight-row样式
'highlight-row': function(params) {
return params.node === gridOptions.api.getSelectedNodes()[0];
}
},
onRowClicked: function(event) {
// 当点击行时,选中该行
event.node.setSelected(true);
},
onCellClicked: function(event) {
// 当点击单元格时,选中该行
event.node.setSelected(true);
}
};
// 将Ag-Grid应用于容器
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
现在,当您点击行或该行的任何单元格时,该行将以黄色背景和粗体字体的方式突出显示。您可以根据需要自定义.highlight-row
类的CSS样式。