Я хотел бы, чтобы ячейка отображалась определенным образом на основе других данных, доступных в объекте props.data
, привязанном к строке. Но я не могу понять, как заставить ячейку повторно визуализироваться при изменении других данных.
У меня довольно простая структура данных, которую я пытаюсь отобразить в ag-сетке, в основном массив свойств, и у каждого есть имя, значение и флаг isLoading, который указывает, обновляется ли свойство (например, фоновое обновление может происходить, данные в ячейке сетки доступны только для чтения).
Я хочу, чтобы в сетке отображались столбцы имени и значения, и я хочу, чтобы в столбце значений отображался значок счетчика, если isLoading == true
.
Я пытаюсь создать для этого настраиваемое средство визуализации ячеек, но ячейка повторно отображается только тогда, когда значение изменяется, а не при изменении флага isLoading.
В моем потоке кода для флага isLoading установлено значение true, затем значение обновляется. Это запускает метод рендеринга, и теперь в ячейке будет отображаться обновленное значение и счетчик загрузки. Затем для флага isLoading устанавливается значение false, но метод рендеринга больше не вызывается, поэтому в ячейке продолжает отображаться счетчик загрузки.
Итак, мой вопрос: как я могу заставить Cellrenderer реагировать на изменения в props.data
, которые не относятся к полю, значение которого он показывает? В этом случае мне нужно повторно отрисовать ячейку при изменении флага props.data.isLoading
.
Я использую ag-grid v17 с react и redux (и пытаюсь машинописный текст).
Мой код очень похож на приведенные здесь примеры: https://www.ag-grid.com/react-redux-integration-pt1/
Мой модуль визуализации ячеек был построен на основе модуля визуализации валюты в этом примере: https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-react-components
Примечание. У меня для deltaRowDataMode сетки установлено значение true, поэтому выполняется повторная визуализация только измененных данных.
Это мое определение столбца:
{
colId: 'value',
headerName: 'Value',
field: 'value', //the property's value on my data structure
cellRendererFramework: MyCellRenderer
}
Это мой рендерер ячеек:
import React from 'react';
import { ICellRendererParams } from 'ag-grid';
interface RendererState {
currentValue: string;
isLoading: boolean;
}
export class MyCellRenderer extends React.Component<ICellRendererParams, RendererState> {
constructor(props: ICellRendererParams) {
super(props);
this.state = { currentValue: props.data.value, isLoading: props.data.isLoading };
}
//refresh is only called when the value changes, not when params.data.isLoading changes, so render does not get called
refresh(params: ICellRendererParams) {
if (params.value !== this.state.currentValue) {
this.setState({ currentValue: params.value });
}
if (params.data.isLoading !== this.state.isLoading) {
this.setState({ isLoading: params.data.isLoading });
}
return true;
}
render() {
var loadingStyle = {
display: (this.state.isLoading) ? '' : 'none'
};
return (
<div>
{this.state.currentValue}
<div className="pull-right">
<span className="fa fa-refresh fa-spin" style={loadingStyle}></span>
</div>
</div>
);
}
}
Это также может быть возможно с использованием класса или стилей ячейки, но есть и другие вещи, которые я хотел бы обрабатывать аналогичным образом, например, наличие средства визуализации ячеек с кнопкой и отключение этой кнопки, если isLoading является правда.
Обновление:
Здесь добавлен рабочий пример: https://react-owixbq.stackblitz.io/