使用 vanilla JS 将 class 添加到扩展行

Question

在我的 angular 应用程序中，我正在尝试解决方法，因为 ag-Grid api getRowClass() 未按预期工作。我需要做的就是向展开的行添加 css class 并在折叠行时将其删除。

使用 ag-Grid api 的原始方法不起作用如下所示：

setRowNode(params) {
    this.gridOptions.getRowStyle = (params) => {
        if(params.node.expanded) {
            return { background: 'red' };
        }
    }
}

理想情况下，我可以选择 DOM 并向其附加 class。我用一些 JQuery 尝试了这个并且它起作用了，但是出于明显的原因我不想在这个应用程序中有 JQuery 。我按照这些行写了一些东西：

$('.ag-row[row="'+params.node.id+'"]',self.api.grid.gridPanel.eBodyContainer).addClass('ag-row-focus');

我如何使用 vanilla JS 来满足这个要求？

Answer 1

您可以通过创建自定义指令来实现，例如：

//row-focus.directive.ts

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appRowFocus]' // you can target classes, id etc.: '.grid-Holdings' for example
})
export class RowFocusDirective {
  @HostBinding('class.ag-row-focus') isFocused = false;

  @HostListener('click') toggleOpen() {
    this.isFocused = !this.isFocused;
  }
}

在您的模块中导入该指令，然后将该指令附加到您的元素：

// your-component.component.ts :

<div class="row" appRowFocus>

这些元素将在点击时切换 ag-row-focus。您可以为其他事件添加不同的 @HostListener。

使用 vanilla JS 将 class 添加到扩展行

Add a class to expanded row using vanilla JS

javascript

css

jquery

ag-grid

angular