Как я могу обновить данные в подробной таблице и не потерять выбор диапазона и фильтры?

У меня есть последняя таблица Enterprise React agGrid с сеткой Master / Detail. Мои данные загружаются на клиенте каждые 5 секунд, а затем неизменно помещаются в хранилище redux. Компонент сетки React использует deltaRowDataMode={true} props и deltaRowDataMode: true в параметрах Detail.

Моя основная сетка работает нормально, как и ожидалось: если я выбрал диапазон, сетка сохранит выбор после обновления данных, поэтому фильтры и меню видимости будут по-прежнему открыты. Но сетка детализации ведет себя иначе: при обновлении данных выборки удаляются, меню видимости закрывается и сетка перескакивает, если фильтры были изменены.

Я читал в документах, что когда я открываю сетку деталей, она создается с нуля, но в моем случае я не закрываю детализацию. Везде я пробовал флаг keepDetailRows=true, который решал проблемы с переходом на обновление и потерей выделения, но сетка детализации сейчас не обновляет данные.


ag-grid-react ag-grid
person Oddeone    schedule 03.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, есть только два возможных варианта в соответствии с документами https://www.ag-grid.com/javascript-grid-master-detail/#changing-data-refresh. Первый - это подробная таблица, которая перерисовывается каждый раз при изменении данных в главной строке, а вторая - подробная строка вообще не изменяется, если включен флаг suppressRefresh. Странное решение, ужасное поведение ...

Обновлять.

И снова здравствуйте. Нашел купе решений.

Первый - использовать detailCellRendererParams в параметрах таблицы и установить для параметра suppressRefresh значение true. Это дает возможность использовать getDetailGridInfo для получения api подробной таблицы. В то время как обновление таблицы деталей отключено, использование detailGridInfo позволяет установить новый data для таблицы деталей.

useEffect(() => {
    const api = gridApiRef;
    api && api.forEachNode(node => {
      const { detailNode, expanded } = node;
      if (detailNode && expanded) {
        const detailGridInfo = api.getDetailGridInfo(detailNode.id);
        const rowData = detailNode.data.someData; // your nested data

        if (detailGridInfo) {
          detailGridInfo.api.setRowData(rowData);
        }
      }
    });
}, [results]);

Второй - использовать пользовательский cellRenderer, wicth гораздо более гибкий и позволяет использовать любой контент внутри cellRenderer. В параметрах таблицы установите detailCellRenderer: 'yourCustomCellRendereForDetailTable. В yourCustomCellRendereForDetailTable вы можете использовать

this.state = {
    rowData: [],
}

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

  refresh(params) {
    const newData = [ ...params.data.yourSomeData];
    const oldData = this.state.rowData;

    if (newData.length !== oldData.length) {
      this.setState({
        rowData: newData,
      });
    }

    if (newData.length === oldData.length) {
      if (newData.some((elem, index) => {
        return !isEqual(elem, oldData[index]);
      })) {
        this.setState({
          rowData: newData,
        });
      }
   }

    return true;
  }

Использование метода refresh таким образом дает полностью настраиваемый подход использования detailCellRenderer.

Примечание. Чтобы получить лучшую производительность при использовании неизменяемых данных, таких как сокращение, необходимо установить immutableData в true как в основной, так и в подробной таблице.

person Roman Lonsky    schedule 12.04.2020