如何使用带有ag-grid的布尔数据的复选框

Question

我已经搜索了一段时间,但没有看到任何真实的例子.

我正在使用ag-grid-react,我想要一个包含布尔值的列来表示带有复选框的布尔值,并在更改时更新rowData中的对象.

我知道有checkboxSelection,我试着像我下面的那样使用它,但实现了它是一个复选框,它没有链接到数据,只是用于选择一个单元格.

var columnDefs = [
        { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
  ]

那么有没有办法用ag-grid和ag-grid-react做我正在寻找的东西？

Answer 1

您应该使用cellRenderer属性

const columnDefs = [{ headerName: 'Refunded', 
    field: 'refunded', 
    editable:true,
    cellRenderer: params => {
        return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
    }
}];

我遇到了同样的问题,这是我能想到的最好的但我无法将值绑定到此复选框.

我将cell属性editable设置为true,现在如果要更改实际值,则必须双击单元格并键入true或false.

但这就是我去了,我决定帮助你,我知道它并非100%全部解决,但至少它解决了数据显示部分.

如果您发现如何请与我们分享您的答案.

Answer 2

我们可以使用 cellRenderer 在网格中显示复选框，这在您想要编辑字段时也可以使用。Grid 不会直接更新 gridoption - rowdata 中的复选框值，直到您不使用可以通过 params 对象访问的节点对象中的相应字段更新节点。

params.node.data.fieldName = params.value;

这fieldName是该行的字段。

{
    headerName: "display name",
    field: "fieldName",
    cellRenderer: function(params) { 
        var input = document.createElement('input');
        input.type="checkbox";
        input.checked=params.value;
        input.addEventListener('click', function (event) {
            params.value=!params.value;
            params.node.data.fieldName = params.value;
        });
        return input;
    }
}

Answer 3

那这个呢？它是在Angular而不是在React上,但你可以得到重点:

        { headerName: 'Enabled', field: 'enabled', cellRendererFramework: CheckboxCellComponent },

这是checkboxCellComponent:

@Component({
selector: 'checkbox-cell',
template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`,
styleUrls: ['./checkbox-cell.component.css']
}) 
export class CheckboxCellComponent implements AfterViewInit, 
ICellRendererAngularComp {

@ViewChild('.checkbox') checkbox: ElementRef;

public params: ICellRendererParams;

constructor() { }

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

public onChange(event) {
  this.params.data[this.params.colDef.field] = event.currentTarget.checked;
  }
}

让我知道

Answer 4

以下代码有助于解决此问题.缺点是gridOptions中的正常事件不会被触发(onCellEditingStarted,onCellEditingStopped,onCellValueChanged等).

var columnDefs = [...
           {headerName: "Label", field: "field",editable: true,
                cellRenderer: 'booleanCellRenderer',
                cellEditor:'booleanEditor'

            }
        ];
//register the components
$scope.gridOptions = {...
                components:{
                    booleanCellRenderer:BooleanCellRenderer,
                    booleanEditor:BooleanEditor
                }
            }; 

  function BooleanCellRenderer() {
  }

  BooleanCellRenderer.prototype.init = function (params) {
      this.eGui = document.createElement('span');
      if (params.value !== "" || params.value !== undefined || params.value !== null) {
          var checkedStatus = params.value ? "checked":"";
          var input = document.createElement('input');
          input.type="checkbox";
          input.checked=params.value;
          input.addEventListener('click', function (event) {
              params.value=!params.value;
              //checked input value has changed, perform your update here
              console.log("addEventListener params.value: "+ params.value);
          });
          this.eGui.innerHTML = '';
          this.eGui.appendChild( input );
      }
  };

  BooleanCellRenderer.prototype.getGui = function () {
      return this.eGui;
  };

  function BooleanEditor() {
  }

  BooleanEditor.prototype.init = function (params) {
      this.container = document.createElement('div');
      this.value=params.value;
      params.stopEditing();
  };
  BooleanEditor.prototype.getGui = function () {
      return this.container;
  };

  BooleanEditor.prototype.afterGuiAttached = function () {
  };

  BooleanEditor.prototype.getValue = function () {
      return this.value;
  };

  BooleanEditor.prototype.destroy = function () {
  };

  BooleanEditor.prototype.isPopup = function () {
      return true;
  };

Answer 5

以下是在 Angular 中创建 agGrid 单元格渲染器以将其中一列绑定到复选框的方法。

这个答案很大程度上基于user2010955上面的答案的优秀答案，但有更多的解释，并更新了最新版本的 agGrid 和 Angular（在添加之前，我使用他的代码收到错误以下变化）。

是的，我知道这个问题是关于agGrid的React版本，但我相信我不会是唯一一个出于绝望而偶然发现这个 StackOverflow 网页的Angular开发人员，试图找到一个 Angular 解决方案来解决这个问题。

（顺便说一句，我不敢相信现在是 2020 年，Angular 的 agGrid没有默认包含复选框渲染器。说真的？！！）

首先，您需要定义一个渲染器组件：

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

@Component({
    selector: 'checkbox-cell',
    template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`
})
export class CheckboxCellRenderer implements ICellRendererAngularComp {

    public params: ICellRendererParams; 

    constructor() { }

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

    public onChange(event) {
        this.params.data[this.params.colDef.field] = event.currentTarget.checked;
    }

    refresh(params: ICellRendererParams): boolean {
        return true;
    }
}

接下来，你需要告诉你的@NgModule：

import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
. . .
@NgModule({
  declarations: [
    AppComponent,
    CheckboxCellRenderer
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([CheckboxCellRenderer])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

在显示 agGrid 的组件中，您需要导入渲染器：

import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';

让我们为我们的网格定义一个新列，其中一些将使用这个新的渲染器：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    @ViewChild('exampleGrid', {static: false}) agGrid: AgGridAngular;

    columnDefs = [
        { headerName: 'Last name', field: 'lastName', editable: true },
        { headerName: 'First name', field: 'firstName',  editable: true },
        { headerName: 'Subscribed', field: 'subscribed', cellRenderer: 'checkboxCellRenderer' },
        { headerName: 'Is overweight', field: 'overweight', cellRenderer: 'checkboxCellRenderer' }
    ];
    frameworkComponents = {
      checkboxCellRenderer: CheckboxCellRenderer
    }
}

现在，当您创建 agGrid 时，您需要告诉它您正在使用的自制框架组件：

<ag-grid-angular #exampleGrid 
    style="height: 400px;" 
    class="ag-theme-material" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [frameworkComponents]="frameworkComponents" >
</ag-grid-angular>

呼！

是的……我花了一段时间才弄清楚如何将所有部分组合在一起。agGrid 自己的网站真的应该包含这样的例子......

Answer 6

反应具体解决方案

将 React (16.x) 函数式组件与 React Hooks 一起使用时，可以轻松编写cellRenderer. 这是与 pnunezcalzado 之前发布的功能等效的功能。

单元渲染器的反应组件

function AgGridCheckbox (props) {
  const boolValue = props.value && props.value.toString() === 'true';
  const [isChecked, setIsChecked] = useState(boolValue);
  const onChanged = () => {
    props.setValue(!isChecked);
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={onChanged} />
    </div>
  );
}

在你的网格中使用它

调整列 def ( ColDef) 以使用此单元格渲染器。

{
  headerName: 'My Boolean Field',
  field: 'BOOLFIELD',
  cellRendererFramework: AgGridCheckbox,
  editable: true,
},

Answer 7

框架 - React/Angular/Vue.js

通过将单元格渲染器创建为本机框架组件，您可以轻松地将单元格渲染器与用于渲染 ag-Grid 的任何 JavaScript 框架集成。

请参阅下面的代码段中的 React 实现：

export default class extends Component {
  constructor(props) {
    super(props);
    this.checkedHandler = this.checkedHandler.bind(this);
  }
  checkedHandler() {
    let checked = event.target.checked;
    let colId = this.props.column.colId;
    this.props.node.setDataValue(colId, checked);
  }
  render() {
    return (
      <input 
        type="checkbox" 
        onClick={this.checkedHandler}
        checked={this.props.value}
      />
    )
  }
}

注意：将单元格渲染器创建为框架组件时，没有必需的生命周期方法。

创建渲染器后，我们将其注册到 ag-Grid 中gridOptions.frameworkComponents并在所需的列上定义它：

// ./index.jsx

 this.frameworkComponents = {
   checkboxRenderer: CheckboxCellRenderer,
 };

 this.state = {
      columnDefs: [
        // ...
        {
          headerName: 'Registered - Checkbox',
          field: 'registered',
          cellRenderer: 'checkboxRenderer',
        },
        // ...
      ]
      // ....

请参阅下面在最流行的 JavaScript 框架（React、Angular、Vue.js）中实现的实时示例：

反应演示。

角度演示。
注意：使用 Angular 时，还需要将自定义渲染器传递给@NgModule装饰器以允许依赖项注入。

Vue.js 演示。

普通 JavaScript

您还可以使用 JavaScript 实现复选框渲染器。

在本例中，复选框渲染器是使用 JavaScript 类构建的。在 ag-Grid 生命周期方法中创建一个输入元素init（必需），并将其选中属性设置为将在其中呈现的单元格的基础布尔值。将单击事件侦听器添加到复选框，以更新此基础单元格值每当输入被选中/取消选中时。

创建的 DOM 元素在（必需的）生命周期挂钩中返回getGui。我们还在destroy可选的生命周期挂钩中进行了一些清理，其中删除了单击侦听器。

function CheckboxRenderer() {}

CheckboxRenderer.prototype.init = function(params) {
  this.params = params;

  this.eGui = document.createElement('input');
  this.eGui.type = 'checkbox';
  this.eGui.checked = params.value;

  this.checkedHandler = this.checkedHandler.bind(this);
  this.eGui.addEventListener('click', this.checkedHandler);
}

CheckboxRenderer.prototype.checkedHandler = function(e) {
  let checked = e.target.checked;
  let colId = this.params.column.colId;
  this.params.node.setDataValue(colId, checked);
}

CheckboxRenderer.prototype.getGui = function(params) {
  return this.eGui;
}

CheckboxRenderer.prototype.destroy = function(params) {
  this.eGui.removeEventListener('click', this.checkedHandler);
}

创建渲染器后，我们只需将其注册到gridOptions.components对象中的 ag-Grid 即可：

gridOptions.components = {
  checkboxRenderer: CheckboxRenderer
}

并在所需的列上定义渲染器：

gridOptions.columnDefs = [
  // ...
  { 
    headerName: 'Registered - Checkbox',
    field: 'registered',
    cellRenderer: 'checkboxRenderer',
  },
  // ...

请参阅下面的演示中的实现：

普通 JavaScript。

阅读我们网站上的完整博客文章或查看我们的文档，了解您可以使用 ag-Grid 实施的各种场景。

艾哈迈德·加迪尔 | 开发者@ag-Grid