AG Grid:单元格中的单独居中复选框

// 自定义单元格渲染器
class CheckboxRenderer {
  init(params) {
    this.eGui = document.createElement('div');
    this.eGui.style.textAlign = 'center';
    this.eGui.innerHTML = `<input type="checkbox" ${params.value ? 'checked' : ''} />`;
    this.eGui.addEventListener('change', () => {
      params.context.onCheckboxChanged(params.rowIndex, params.colDef.headerName, this.eGui.querySelector('input').checked);
    });
  }

  getGui() {
    return this.eGui;
  }

  destroy() {
    if (this.eGui && this.eGui.parentNode) {
      this.eGui.parentNode.removeChild(this.eGui);
    }
  }
}

// AG Grid 配置
const gridOptions = {
  columnDefs: [
    {
      headerName: 'Select',
      field: 'select',
      cellRenderer: 'checkboxRenderer',
      cellRendererParams: {
        context: this
      }
    },
    // 其他列定义
  ],
  rowData: [
    { select: true },
    { select: false },
    // 其他数据
  ],
  frameworkComponents: {
    checkboxRenderer: CheckboxRenderer
  }
};

// 初始化 AG Grid
new agGrid.Grid(document.getElementById('myGrid'), gridOptions);