AG-Grid - 原始 Javascript 中单元格级别的复选框

【问题标题】：AG-Grid - Checkbox at the cell level in raw JavascriptAG-Grid - 原始 Javascript 中单元格级别的复选框
【发布时间】：2021-10-21 10:12:59
【问题描述】：

如何在 ag-grid 的单元格级别创建复选框。

我这样做了：

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

但是当我选中/取消选中复选框时如何更改值？

我怎样才能使样式与 ag-grid 上的默认复选框具有相同的样式？

有没有更好的方法来做到这一点？

谢谢

【问题讨论】：

标签： javascript ag-grid

【解决方案1】：

Working Example

您可以为刚刚创建的输入添加点击监听器。并为其绑定一个方法，该方法可以为该特定列设置数据，就像这样

function checkboxCellRenderer (params){
  var input = document.createElement("input")
  input.type = "checkbox";
  input.checked = params.value
  console.log(input)
  this.checkedHandler = this.checkedHandler.bind(this);
  input.addEventListener('click', this.checkedHandler);
  return input
}

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

要应用类似于 ag-grid 复选框的样式，您必须添加要添加到原始网格的类。这是原始复选框的结构。

【讨论】：