Question

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

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

Answer 1

我试图了解今天它是如何运作的。我能找到的是，最好的方法是创建一个新的组件并使用cellRendererFramework而不是cellRenderer。

这是一个带有示例的StackBlitz：

Stackblitz example Checkbox in ag-grid

*更新了Stackblitz示例以显示如何更新基础模型！谢谢你的提示！

Answer 2

听起来您在每列中使用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 3

      {
      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 4

首先-他们终于发布了一个有效的示例：

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

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

Answer 5

您可以使用布尔值（对或错）

我尝试了，这是可行的：

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);
    })
});

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

5 个答案: