要实现这个目标，我们需要在行编辑模式下动态修改格子的属性。我们可以通过监听外部按钮的点击事件来实现。例如，我们可以在按钮点击事件中设置一个标志变量来表示ag-grid的可编辑状态，并在gridOptions.onCellEditingStarted回调函数中根据这个标志变量设置单元格的可编辑性。以下是代码示例：

HTML:

Toggle Edit Mode

JavaScript:

// 初始化标志变量
let isEditable = false;

// 监听按钮点击事件
document.getElementById('toggle-edit-mode-button').addEventListener('click', () => {
  isEditable = !isEditable;
  // 根据isEditable标志变量设置按钮文本
  document.getElementById('toggle-edit-mode-button').innerText = isEditable ? 'Disable Edit Mode' : 'Enable Edit Mode';
});

// Ag-grid配置项
const gridOptions = {
  columnDefs: [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age', editable: isEditable }
  ],
  defaultColDef: {
    resizable: true
  },
  rowData: [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 }
  ],
  // 在单元格编辑开始时设置可编辑性
  onCellEditingStarted: (event) => {
    if (event.column.getColDef().field === 'age') {
      event.column.setColDef({ editable: isEditable });
    }
  }
};

// 创建Ag-grid实例
const gridDiv = document.querySelector('#my-grid');
new agGrid.Grid(gridDiv, gridOptions);