ag-grid 单元格级别复选框选择

Question

我想显示所有行，所有带有复选框的列，因为我只想要真/假值。但我想访问单个单元格值，即每个复选框都可以选中/取消选中。见下图。

据我所知，当我勾选复选框时，行的所有复选框都会被选中。那么，我可以选中/取消选中单个框吗？

Answer 1

我今天也试图找出它是如何工作的。我可以发现，最好的方法是创建一个新组件并使用cellRendererFramework 而不是cellRenderer。

这里有一个 StackBlitz 示例：

Stackblitz example Checkbox in ag-grid

*更新了 Stackblitz 示例以展示如何更新底层模型！谢谢你的提示！

Answer 2

      {
      headerName: 'Operator',
      checkboxSelection: false,
      headerCheckboxSelection: false,
      filter: false,
      sortable: false,
      field: 'operator',
      cellRenderer: function(params) {
        let operatorValue = params.value;
        const input = document.createElement('input');
        input.type = 'checkbox';
        if (operatorValue) {
            input.checked = true;
            params.data.operator = true;
        } else {
            input.checked = false;
            params.data.operator = false;
        }
        input.addEventListener('click', function (event) {
          input.checked != input.checked;
          params.data.operator  = input.checked;
        });
        return input;
    }
    }

希望这将有助于演示和设置价值。

Answer 3

听起来您在每一列中都使用了checkboxSelection 选项，这肯定会导致您描述的行为。相反，您将希望使用cellRenderer，就像在这个plunker 中一样。

相关代码：

function checkboxCellRenderer (params){
  var input = document.createElement("input")
  input.type = "checkbox";
  input.checked = params.value
  console.log(input)
  return input
}

只需在您的数据列中引用此函数即可：

{headerName: 'upload', field: 'e', cellRenderer: checkboxCellRenderer},

Answer 4

您可以使用布尔值（真或假）

我试试这个，它的工作：

var columnDefs = [
  {
    headerName: 'Operator', 
    field: 'operator',
    editable: true,
    cellEditor: 'booleanEditor',
    cellRenderer: booleanCellRenderer
  },
];

功能复选框编辑器

function getBooleanEditor() {
    // function to act as a class
    function BooleanEditor() {}

    // gets called once before the renderer is used
    BooleanEditor.prototype.init = function(params) {
        // create the cell
        var value = params.value;

        this.eInput = document.createElement('input');
        this.eInput.type = 'checkbox'; 
        this.eInput.checked = value;
        this.eInput.value = value;
    };

    // gets called once when grid ready to insert the element
    BooleanEditor.prototype.getGui = function() {
        return this.eInput;
    };

    // focus and select can be done after the gui is attached
    BooleanEditor.prototype.afterGuiAttached = function() {
        this.eInput.focus();
        this.eInput.select();
    };

    // returns the new value after editing
    BooleanEditor.prototype.getValue = function() {
        return this.eInput.checked;
    };

    // any cleanup we need to be done here
    BooleanEditor.prototype.destroy = function() {
        // but this example is simple, no cleanup, we could
        // even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup
    BooleanEditor.prototype.isPopup = function() {
        // and we could leave this method out also, false is the default
        return false;
    };

    return BooleanEditor;
}

然后是 booleanCellRenderer 函数

function booleanCellRenderer(params) {
    var value = params.value ? 'checked' : 'unchecked';

    return '<input disabled type="checkbox" '+ value +'/>';
}

让网格知道要使用哪些列和哪些数据

var gridOptions = {
    columnDefs: columnDefs,
    pagination: true,
    defaultColDef: {
        filter: true,
        resizable: true,
    },
    onGridReady: function(params) {
        params.api.sizeColumnsToFit();
    },
    onCellValueChanged: function(event) {
        if (event.newValue != event.oldValue) { 
            // do stuff
            // such hit your API update
            event.data.operator = event.newValue; // Update value of field operator
        }
    },
    components:{
        booleanCellRenderer: booleanCellRenderer,
        booleanEditor: getBooleanEditor()
    }
};

页面加载完成后设置网格

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    // create the grid passing in the div to use together with the columns & data we want to use
    new agGrid.Grid(gridDiv, gridOptions);

    fetch('$urlGetData').then(function(response) {
        return response.json();
    }).then(function(data) {
        gridOptions.api.setRowData(data);
    })
});

Answer 5

fwiw -- 他们终于发布了一个工作示例：

https://www.ag-grid.com/example-angular-material-design/

如果您将材料复选框更改为常规输入复选框，它会按预期工作。