原生JavaScript下AG-Grid单元格级Checkbox实现相关问题咨询

1. 勾选/取消勾选Checkbox时同步单元格值的方案 #

需要给自定义的checkbox元素绑定change事件，调用AG-Grid暴露的setValue方法直接更新对应单元格的绑定值，修改后的渲染函数如下：

function checkboxCellRenderer (params){
  var input = document.createElement("input")
  input.type = "checkbox";
  input.checked = params.value
  // 新增值同步逻辑
  input.addEventListener('change', (e) => {
    params.setValue(e.target.checked)
  })
  return input
}

params.setValue会自动将值同步到AG-Grid的行数据模型中，无需手动修改rowNode的原始数据。

2. 自定义Checkbox与AG-Grid默认样式对齐方案 #

无需编写自定义CSS，直接给创建的checkbox元素添加AG-Grid内置的样式类即可自动适配当前主题的默认checkbox样式，完整渲染函数如下：

function checkboxCellRenderer (params){
  // 套入官方内置的checkbox容器结构
  const wrapper = document.createElement("span")
  wrapper.className = "ag-checkbox"
  
  const input = document.createElement("input")
  input.type = "checkbox";
  input.className = "ag-checkbox-input"; // 绑定官方内置样式类
  input.checked = params.value
  
  input.addEventListener('change', (e) => {
    params.setValue(e.target.checked)
  })
  
  wrapper.appendChild(input)
  return wrapper
}

该结构完全对齐AG-Grid原生checkbox的DOM结构，样式会和默认渲染的checkbox完全一致。

3. 更优实现方案 #

不需要自定义渲染函数，AG-Grid已经内置了专门的checkbox单元格渲染/编辑组件，直接在列配置中调用即可：

{
  "headerName":"upload",
  "field":"e",
  "cellRenderer":"agCheckboxCellRenderer",
  "cellRendererParams": {
    "disabled": false // 直接在渲染层支持点击切换，无需进入编辑模式
  }
}

该方案的优势：

• 无需手动维护事件监听、值同步、样式适配逻辑，所有功能AG-Grid已做原生优化
• 适配虚拟滚动场景，不会出现自定义渲染可能导致的状态错位、内存泄露问题
• 可直接搭配headerCheckboxSelection等内置参数实现表头全选、批量操作等拓展功能，拓展性更强

内容的提问来源于stack exchange，提问作者wakema2424