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

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

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

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

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

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

您应该使用cellRenderer属性

const columnDefs = [{ headerName: 'Refunded', 
    field: 'refunded', 
    editable:true,
    cellRenderer: params => {
        return ``;
    }
}];

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

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

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

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

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

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

这是checkboxCellComponent:

@Component({
selector: 'checkbox-cell',
template: ``,
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;
  }
}

让我知道

以下代码有助于解决此问题.缺点是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;
  };