Select ag网格单元级别复选框选择

Select ag网格单元级别复选框选择,select,checkbox,ag-grid,Select,Checkbox,Ag Grid,我想用复选框显示所有行、所有列,因为我只需要真/假值。但我想访问单个单元格值,即每个复选框都可以选中/取消选中。见下图 据我所知,当我勾选复选框时,将选中行的所有复选框。那么,我可以选中/取消选中单个复选框吗?听起来您在每列中都使用了复选框选择选项,这肯定会导致您描述的行为。相反,您将希望在本例中使用类似的 相关代码: function checkboxCellRenderer (params){ var input = document.createElement("input") i

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


据我所知,当我勾选复选框时,将选中行的所有复选框。那么,我可以选中/取消选中单个复选框吗?

听起来您在每列中都使用了复选框选择选项,这肯定会导致您描述的行为。相反,您将希望在本例中使用类似的

相关代码:

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},

听起来您在每个列中都使用了checkboxSelection选项,这肯定会导致您描述的行为。相反,您将希望在本例中使用类似的

相关代码:

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},

我今天也在试着弄清楚它是怎么工作的。我能发现的是,最好的方法是创建一个新组件并使用CellRenderFramework而不是cellRenderer

以下是StackBlitz的一个例子:


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

我今天也在试着弄清楚它是如何工作的。我能发现的是,最好的方法是创建一个新组件并使用CellRenderFramework而不是cellRenderer

以下是StackBlitz的一个例子:


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

fwiw-他们最终发布了一个工作示例:


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

fwiw-他们最终发布了一个工作示例:

      {
      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;
    }
    }
如果将“材质”复选框更改为“常规输入”复选框,则它将按预期工作

      {
      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;
    }
    }
希望这将有助于演示以及设置值


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

您可以使用布尔值true或false

我尝试了这个,它的工作:

var columnDefs = [
  {
    headerName: 'Operator', 
    field: 'operator',
    editable: true,
    cellEditor: 'booleanEditor',
    cellRenderer: booleanCellRenderer
  },
];
函数复选框编辑器

然后是布尔函数

在页面完成加载后设置网格


可以使用布尔值true或false

我尝试了这个,它的工作:

var columnDefs = [
  {
    headerName: 'Operator', 
    field: 'operator',
    editable: true,
    cellEditor: 'booleanEditor',
    cellRenderer: booleanCellRenderer
  },
];
函数复选框编辑器

然后是布尔函数

在页面完成加载后设置网格


对我终于创造了一个新的世界。我使用的是angular2,因此无法使用上述代码。如何获取单元格值?是。。我终于创造了一个新的世界。我正在使用angular2,因此无法使用上述代码如何获得单元格值?我对此感到非常兴奋,但-它不会更新基础模型-即{cbox:true,无限期保持为true。请原谅我的延迟回复。您可以通过使用以下代码refreshparams:any:boolean轻松修复它{params.data.amount++;params.data.cbox=params.value;console.logparams.value;params.api.refreshCellsparams;返回false;}在上面的例子中,有没有一种方法可以让我在标题中添加一个复选框来只选择特定列的单元格?呃,是的。但是当你在编辑模式下编辑包含文本的第二列并点击Tab键时,它会完全跳过复选框列。我们如何解决这个问题呢?我对此感到非常兴奋,但-它没有更新基础模型-即{cbox:true,无限期保持为true。请原谅我的延迟回复。您可以通过使用以下代码refreshparams轻松修复它:any:boolean{params.data.amount++;params.data.cbox=params.value;console.logparams.value;params.api.refreshCellsparams;return false;}在上面的例子中,有没有一种方法可以让我在标题中添加一个复选框来只选择该特定列的单元格?呃,是的。但是当你在编辑模式下编辑包含文本的第二列并点击Tab键时,它会完全跳过复选框列。我们如何避免这种情况?