ag-grid: переключение между редактированием fullRow и редактированием отдельной ячейки в зависимости от содержимого rowNode

У меня есть определенные строки в моей сетке, которые должны запускать редактирование fullRow, потому что большая часть данных пуста. Некоторые столбцы также должны быть обязательными. Есть ли способ сделать определенные строки (на основе данных rowNode) fullRow редактируемыми при сохранении режима редактирования ячеек для других строк?

Спасибо


reactjs javascript ag-grid-react ag-grid
person anthozep    schedule 07.08.2019    source источник
comment
пожалуйста, поделитесь кодом, который вы пробовали до сих пор   -  person Naga Sai A    schedule 07.08.2019
comment
Насколько мне известно, editType в параметрах сетки ожидает строку. Однако он не передает параметры, такие как editable in column defs, поэтому я не уверен, можно ли оценить параметры сетки на основе данных.   -  person anthozep    schedule 08.08.2019
comment
Вы пробовали исследовать gridApi, а затем устанавливать значение на основе щелчка строки в качестве динамического свойства editType?   -  person Rikin    schedule 08.08.2019
comment
@Rikin, похоже, я могу выбрать редактор ячеек на основе этого: ag-grid.com/javascript-grid-cell-editing/, однако я не вижу возможности переключить editType. Я предполагаю, что мне придется создать собственные редакторы ячеек, которые будут копиями предоставленных редакторов ячеек или fullRow. Я попробую.   -  person anthozep    schedule 09.08.2019
comment
Я попробовал этот подход, но мне показалось, что много проводов, поэтому я не пошел на это, но мой подход был назначен onRowClick или связанному обработчику в gridOptions, а затем, как только этот обработчик вызывается, вы получаете объект события, на котором был выставлен api, с помощью которого вы можете иметь возможность перейти к cellDef, а затем изменить тип editType для текущей строки, не уверен, возможно ли это, но я не особо исследовал, так как это отнимало слишком много времени и не позволяло быстро его опробовать.   -  person Rikin    schedule 09.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать это довольно легко (у меня это заняло 15 минут).

В вашем методе onCellClicked($event) установите переменную уровня модуля, для которой был выбран столбец.

E.g:

  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. Если я щелкну любую другую строку, полная редакция столбцов месяца отображается как редактируемая.

Однако существует раздражающая необходимость дважды щелкнуть ячейку, чтобы перейти в режим редактирования, когда вначале требуется только один щелчок.

person Aiden Dipple    schedule 22.04.2021