如何使 ag-grid 中的布尔列显示复选框

Question

我的网格中有一个布尔列，它当前显示“真”或“假”，但我希望它显示一个复选框。
我该怎么做。
我们正在使用带有 Angular 和 Adaptable 的 ag-grid 25。

Answer 1

正如您所说的，您使用的是 AdapTable，那么您只需将列的名称添加到 PredefinedConfig / UserInterface 中的 CheckBoxColumns 列表

见：https://docs.adaptabletools.com/docs/predefined-config/user-interface-config#checkboxcolumns

比如：

    export default {
        UserInterface: {
            CheckboxColumns: ['myBooleanColumn'],
        },
    } as PredefinedConfig;

这将动态创建一个与 NearHuscarl 建议的非常相似的 CellRenderer。

如果该列是只读的，复选框将被禁用。

值得注意的是，每次单击列中的单元格时，CheckboxColumnClickedEvent 都会触发。

Answer 2

您可以编写自己的 cell renderer 来呈现复选框而不是字符串。下面是一个例子：

import { Component, OnDestroy } from '@angular/core';
import { ICellRendererAngularComp } from '@ag-grid-community/angular';

@Component({
  selector: 'checkbox-renderer',
  template: `
    <input 
      type="checkbox" 
      (click)="checkedHandler($event)"
      [checked]="params.value"
    />
`,
})
export class CheckboxRenderer implements ICellRendererAngularComp, OnDestroy {
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  checkedHandler(event) {
      let checked = event.target.checked;
      let colId = this.params.column.colId;
      this.params.node.setDataValue(colId, checked);
  }
}

import { CheckboxRenderer } from "./checkbox-renderer.component";

this.frameworkComponents = {
  checkboxRenderer: CheckboxRenderer
};

Live Demo

资源

• https://blog.ag-grid.com/binding-boolean-values-to-checkboxes-in-ag-grid