Ag-Grid: соответствие цветов при фильтрации - PullRequest
Новая
       14

Ag-Grid: соответствие цветов при фильтрации

1 голос
/ 30 апреля 2019

Я использую AG-Grid для отображения значения.Мне было интересно: есть ли способ закрасить соответствующую ячейку при быстрой фильтрации?

Например, у меня есть 

[
  { firstName: 'Tom', lastName: 'Doe', company: 'Tesla' },
  { firstName: 'Tim', lastName: 'Boulder', company: 'Tommy Hilfiger },
  { firstName: 'Ben', lastName: 'Miller', company: 'D3' }
]

, и я ищу om, чтобы Бен больше не отображалсяи цвета таблицы Tom для Тома и Tommy Hilfiger для Тима.

Ответы [ 2 ]

1 голос
/ 01 мая 2019

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

gridOptions.quickFilterText

, а затем использовать его в функции класса ячеек: 

var colDef = {
  name: 'First name',
  field: 'firstName',
  cellClass: function(params) { 
    return params.value.indexOf(this.gridOptions.quickFilterText) > -1
      ? 'value-found-class'
      : 'no-value-found-class'
  );}
}

Если функция cellClass не перезапускается, прослушайте событие filterChanged : 

gridOptions.onFilterChanged = function() {
  gridOptions.api.refreshCells();
}

Проверьте параметры для refreshCells: https://www.ag -grid.com / javascript-grid-обновления /

0 голосов
/ 02 мая 2019

Вот хакерское решение для React (кстати, проблема в конвейере ag-grid - AG119):

1 Включите reactNext и введите значение frameWorkComponents: 

<AgGridReact
  animateRows={true}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  frameworkComponents={frameworkComponents}
  multiSortKey="ctrl"
  onFirstDataRendered={onFirstDataRendered}
  onGridReady={onGridReady}
  quickFilterText={searchValue}
  reactNext={true}
  rowData={contacts}
/>

2 Определить frameWorkComponents:

import HighlightCellRenderer from './HighlightCellRenderer';
// ...
const frameworkComponents = {
  highlightCellRenderer: HighlightCellRenderer,
};

3 В вашем colDefs добавьте cellRenderer: 

cellRenderer: 'highlightCellRenderer',

4 Наконец, создайте свой пользовательский компонент: 

import React from 'react';
import { useSelector } from 'react-redux';

import { getSearchValue } from '../../layout/header/search-value-reducer';

function HighlightCellRenderer({ value }) {
  const searchValue = useSelector(getSearchValue);
  if (searchValue && value.toLowerCase().includes(searchValue)) {
    return <strong>{value}</strong>;
  }
  return <span>{value}</span>;
}

export default HighlightCellRenderer;

В моем случае я получаю searchValue с помощью Redux.

Примечание. Использование таких ячеек может привести к снижению производительности и отключению таких функций, как автоматическое изменение размера: 

// ? This won't work with the custom cells:
function onFirstDataRendered({ columnApi }) {
  var allColumnIds = [];
  columnApi.getAllColumns().forEach(function(column) {
    allColumnIds.push(column.colId);
  });
  columnApi.autoSizeColumns(allColumnIds);
}
...