javascript - ag-grid:根据rowNode内容在fullRow编辑和单个单元格编辑之间切换

Question

我的网格中有某些行应该触发 fullRow 编辑，因为大部分数据都是空白的。一些列也应该是必填列。有没有一种方法可以使某些行(基于 rowNode 数据)的 fullRow 可编辑，同时保持其他行的单元格编辑模式？

谢谢

Answer 1

你可以很容易地做到这一点(我花了 15 分钟)。

在您的 onCellClicked($event) 方法中，设置一个模块级别的变量，用于点击列。

例如:

  onCellClicked($event) {
      this.fullRowEditOnlyPopup = $event.colDef.field;

      if (this.editingRowIndex !== $event.rowIndex) {
        $event.api.startEditingCell({
          rowIndex: $event.rowIndex,
          colKey: $event.column.colId
        });
        this.editingRowIndex = $event.rowIndex;
      }
  }

我有一个带有按钮的列，该按钮会弹出一个 ICellEditorAngularComp 'cdTargetLabourDetailRenderer'，调用时它应该是行中唯一可编辑的项目:

this.columnDefs.push({
  headerName: '',
  field: 'popupEditColumn',
  cellStyle: { 'text-align': 'left' },
  cellEditor: 'cdTargetLabourDetailRenderer',
  cellRendererParams: { buttonType: 'settings' },
  cellRendererFramework: MatButtonComponent,

  cellEditorParams: (params) => {
    return {
      resource: this.getTargetResource(params)
    };
  },
  onCellValueChanged: (params: any) => {
    if (params.node && params.node.data && params.node.data.resource) {
      params.data.resource = params.node.data.resource;
      params.data.description = params.node.data.resource.description;
      this.gridApi.updateRowData(params.node.data);
    }

    this.gridApi.refreshCells();
  },
  editable: (params) => {
    return (this.fullRowEditOnlyPopup === 'popupEditColumn');
  },
});

我有 12 列我想在全行模式下编辑，如果它们是可编辑的则返回，这取决于是否单击了弹出编辑列，或不同的列(包括任何 12 个月的列):

this.months.forEach((month: any) => {
  this.columnDefs.push({
    headerName: this.datePipe.transform(month, 'MMM yy'),
    field: this.datePipe.transform(month, 'MMMyy'),
    type: 'numericColumn',
    cellStyle: {
      'text-align': 'right',
    },
    valueFormatter: this.labourFormatter,
    editable: (params) => {
      let editable = false;
      if (this.fullRowEditOnlyPopup === 'popupEditColumn') { return false; }

      // Perform other logic if needed for month columns
      if (!doingStuffAndThings) {
        editable = false;
      } else {
        editable = true;
      }

      return editable;
    },
  });
});

如果我单击 'popupEditorColumn'，则只会显示 ICellEditorAngularComp。如果我点击任何其他行，月列的整行编辑显示为可编辑。

但是，需要双击单元格才能进入编辑模式，这是一个烦人的问题，而在初始时间，它只需要单击一次。