从ag-grid中的行中删除复选框

要从ag-Grid中的行中删除复选框，您可以使用ag-Grid的自定义单元格组件来实现。以下是一个示例代码，演示如何在ag-Grid中的行中删除复选框：

首先，创建一个自定义单元格组件，该组件将显示一个删除复选框的按钮。在按钮的点击事件中，您可以执行删除操作。

// 自定义单元格组件
class DeleteCheckboxComponent {
  // 初始化组件
  init(params) {
    this.params = params;
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = '<input type="checkbox" class="delete-checkbox">';
    this.eCheckbox = this.eGui.querySelector('.delete-checkbox');
    this.eCheckbox.addEventListener('click', this.onCheckboxClick.bind(this));
  }

  // 获取DOM元素
  getGui() {
    return this.eGui;
  }

  // 单击复选框的事件处理程序
  onCheckboxClick(event) {
    // 执行删除操作
    const selectedRow = this.params.node;
    // 在此处执行删除操作，例如：
    // deleteRow(selectedRow.data.id);
  }

  // 销毁组件
  destroy() {
    this.eCheckbox.removeEventListener('click', this.onCheckboxClick);
  }
}

然后，在ag-Grid的列定义中，使用自定义单元格组件来替代复选框列。在自定义单元格组件中，您可以根据需要进行样式和布局的定制。

// 列定义
const columnDefs = [
  { headerName: 'Name', field: 'name' },
  { headerName: 'Delete', cellRendererFramework: DeleteCheckboxComponent }
];

// 创建ag-Grid实例
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  onGridReady: function(params) {
    params.api.sizeColumnsToFit();
  }
};

// 将ag-Grid实例绑定到DOM元素
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

在上面的示例中，我们创建了一个名为DeleteCheckboxComponent的自定义单元格组件，并在列定义中使用它。在onCheckboxClick事件处理程序中，您可以执行删除操作，例如调用deleteRow函数来删除选定的行。