在角度ag-grid中，如何使某些单元格可编辑

Question

在 Angular ag-grid 中，如何使列的某些单元格可编辑。 在我的网格中，我有一个“状态”列，该状态列是一个下拉字段，并且只能对某些初始值进行编辑。 状态列下拉列表可以包含 A、B、C 当网格最初加载时，如果来自数据库的值是“A”，那么只有该单元格需要可编辑，并且应该出现下拉列表。对于所有其他值，该单元格应该是不可编辑的。 我尝试在列定义代码中实现这一点，以便当值为“A”时使“可编辑”标志为 true。 但这种方法的问题是，当用户尝试将值从“A”更改为“B”时，该字段将变得不可编辑。如果初始值为“A”，我想保持此单元格可编辑，直到用户点击“保存”按钮。任何实现这一目标的建议。

const columnDefs = [
// ...
   {
    headerName: 'status',
    field: 'status',
    editable: function(params) {
        // allow `status` cell to be edited for rows with value `A`
        return params.data.status === 'A';
    },
},

// ...

];

Answer 1

基本上，您可以实现条件单元格编辑器。

我与您分享官方文档中的示例，只需进行简单修改即可获得您想要的

https://plnkr.co/edit/F2GmYk63Dwu3RP2D？预览

如果运动员字段值等于 Michael Phelps，我们将渲染一个文本编辑器，否则我们将渲染一个日期选择器编辑器

  init(params: ICellEditorParams) {
    // if the athlete field value is equal to Michael Phelps, render a text editor
    if (params.data.athlete === 'Michael Phelps') {
      this.eInput = document.createElement('input');
      this.eInput.value = params.value;
    // otherwise render a date picker editor
    } else {
      this.eInput = document.createElement('input');
      this.eInput.value = params.value;
      this.eInput.classList.add('ag-input');
      this.eInput.style.height = 'var(--ag-row-height)';
      this.eInput.style.fontSize = 'calc(var(--ag-font-size) + 1px)';

      // https://jqueryui.com/datepicker/
      $(this.eInput).datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: () => {
          this.eInput.focus();
        },
      });
    }
  }

您可以阅读更多内容https://www.ag-grid.com/angular-data-grid/component-cell-editor/