如何在 ag-grid 显示复选框中制作我的布尔列

Question

我的网格中有一个布尔值列，当前显示 'true' 或 'false'，但我希望它显示一个复选框。
我应该怎么做。
我们正在使用带有 Angular 和 Adaptable.

的 ag-grid 25

Answer 1

您可以编写自己的 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

Answer 2

正如您所说，您正在使用 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。

如何在 ag-grid 显示复选框中制作我的布尔列

How do I make my boolean column in ag-grid show checkboxes

datagrid

ag-grid

ag-grid-angular

Live Demo

资源