Реализация выбора строки ag-Grid с пользовательским флажком - PullRequest
Новая
       7

Реализация выбора строки ag-Grid с пользовательским флажком

0 голосов
/ 07 декабря 2018

У меня есть следующее ColDef для моей таблицы ag-Grid: 

const checkboxRenderer: React.SFC<ICellRendererParams> = params => {
  const checked = find(this.state.selectedOptions, x => x.id === params.data.id) != null;
  return (
    <div className="custom__cb">
      <input type="checkbox" checked={checked} />
      <label>
        <span className="custom__cb__label-text">{params.value}</span>
      </label>
    </div>
  );
};

const columnDef: ColDef = 
    colDef.field = 'id';
    colDef.cellRendererFramework = checkboxRenderer;
}

Я определил свою таблицу ag-Grid следующим образом: 

onSelectionChanged = (e: SelectionChangedEvent) => {
  const { api } = e;
  if (api) {
    const selectedOptions = api.getSelectedRows();
    this.setState({ selectedOptions });
  }
};

onRowSelected = (e: RowSelectedEvent) => {
  const isAlreadySelected = find(this.state.selectedOptions, x => x.id === e.data.id) != null;
  if (isAlreadySelected) {
    this.setState({ selectedOptions: this.state.selectedOptions.filter(x => x.id !== e.data.id) });
  } else {
    this.setState({ selectedOptions: [...this.state.selectedOptions, e.data] });
  }
};

<AgGridReact
  columnDefs={columnDefs}
  rowData={options}
  onSelectionChanged={this.onSelectionChanged}
  onRowSelected={this.onRowSelected}
  rowSelection="multiple"
/>

Это делаетправильный пользовательский флажок, а также правильно устанавливает selectedOptions в состоянии моего компонента при выборе строки.Проблема в том, что мой пользовательский флажок не отражает правильный проверенный статус.Это всегда непроверено.Не похоже, что checkboxRenderer выполняет повторный рендеринг при изменении моего состояния.

Как реализовать флажок для выбора пользовательской строки, который правильно отражает проверенное состояние?

1 Ответ

0 голосов
/ 08 июля 2019

Я не уверен, что это относится к вашей проблеме, но следующие ключи были ключом к получению AgGridReact для обновления при изменении состояния:

В компоненте <AgGridReact используйте свойство onGridReady вместо установки данных итакже установите deltaRowDataMode={true}

В componentDidUpdate Реагировать на событие компонента, выборочно (только при изменении данных строки) сбрасывать данные строки с помощью this.gridApi.setRowData(rowData)

Эти изменения были ключевыми для обновления сетки приподдержание состояния сетки.

...