如何在AG Grid中仅禁用部分行的编辑功能

嘿，这个需求AG Grid本身就提供了完美的解决方案，不用纠结全局设置editable: false啦！核心思路是把editable从固定的布尔值换成动态判断函数，根据每行的数据或索引来决定是否允许编辑。下面给你两种常用的实现方式：

方式一：列级别的条件编辑（灵活控制单/多列） #

如果需要给不同列设置不同的编辑条件，直接在列定义里把editable设为一个函数即可。函数会接收一个params参数，里面包含当前行的data（行数据）、rowIndex（行索引，从0开始）等信息，你可以基于这些值返回true（允许编辑）或false（禁止编辑）。

示例代码：

const columnDefs = [
  {
    headerName: '商品名称',
    field: 'productName',
    // 仅当行数据的canEdit字段为true时，该列允许编辑
    editable: (params) => params.data.canEdit
  },
  {
    headerName: '库存数量',
    field: 'stock',
    // 这里换个逻辑：仅允许索引为1和3的行（也就是第2、4行）编辑
    editable: (params) => params.rowIndex === 1 || params.rowIndex === 3
  }
];

方式二：整行级别的条件编辑（统一控制所有列） #

如果希望整行的所有列都遵循同一个编辑条件，用gridOptions里的isRowEditable函数会更高效，不用给每个列单独设置editable函数。

示例代码：

const gridOptions = {
  columnDefs: [/* 你的列定义数组 */],
  rowData: [/* 你的行数据数组 */],
  // 整行编辑权限判断：仅允许id为2和5的行编辑
  isRowEditable: (params) => {
    return params.data.id === 2 || params.data.id === 5;
  }
};

小提示 #

• 两种方式可以结合使用：如果某列需要特殊的编辑规则，优先级以列定义的editable函数为准，会覆盖行级的isRowEditable设置。
• params参数里还有很多有用的属性，比如node（当前行节点），你可以根据业务需求灵活定制判断逻辑。

内容的提问来源于stack exchange，提问作者L.E