Question

我正在使用AG-Grid显示值。我想知道：快速过滤时是否可以为匹配的单元格着色？

例如我有

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

然后我搜索om，发现Ben不再显示，汤姆（Tom）和蒂姆（Tommy Hilfiger）的桌子颜色。

Answer 1

一种可能的方法：使用以下方法获取快速过滤器文本

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-refresh/

Answer 2

这是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;

就我而言，我正在使用Redux来获得searchValue。

注意：像这样使用自定义单元格可能会影响性能并禁用诸如自动调整大小之类的功能：

//  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);
}

Ag-Grid：过滤时的颜色匹配

2 个答案: