自定義過濾器 ag 網格反應

Question

我試圖使用 React 在 ag 網格中實現自定義 DropDown 過濾器。 我遵循的鏈接是鏈接

我能夠創建過濾器，但是默認情況下過濾器不會出現。 作為用戶，我們需要單擊列標題旁邊的 3 箭頭圖標，然后才會出現過濾器。

有沒有辦法默認顯示自定義過濾器下拉列表？

Answer 1

我希望Floating filters可以幫助您。

在ag-grid 文檔中查看此示例

      filter: "agNumberColumnFilter",
      floatingFilterComponent: "sliderFloatingFilter",
      floatingFilterComponentParams: {
        maxValue: 5,
        suppressFilterButton: true
      },

該示例顯示了sliderFloatingFilter ，要使其成為下拉過濾器，我認為您需要為其創建自定義組件。

看看ag-grid團隊如何在GitHub 代碼上制作TextFloatingFilterComp 、 DateFloatingFilterComp 、 NumberFloatingFilterComp等

希望這會有所幫助。

Answer 2

我使用此列配置實現了下拉/枚舉過濾器。 我的情況，我試圖添加一個布爾過濾器。

這是完整的例子

https://codesandbox.io/s/ag-grid-react-enum-filter-q4er8?file=/src/App.js:1572-1599

 const getEnumColumnParams = (enumMap) => { return { cellRenderer: (params) => { if (!params.data) return ""; const { value } = params; return enumMap[value]; }, filterParams: { buttons: ['reset', 'apply'], closeOnApply: true, filterOptions: [ "empty", ...Object.keys(enumMap).map(key => { return { displayKey: key, displayName: enumMap[key], test: function (filterValue, cellValue) { return cellValue === true; }, hideFilterInput: true, }; }) ], suppressAndOrCondition: true, }, }; }; const boolEnum = { true: 'Yes', false: 'No' }; const colorEnum = { '#ff00000': 'Red', '#00ff00': 'Green', '#0000ff': 'Blue', }; const columnDefs = [ { field: 'available', ...getEnumColumnParams(boolEnum), }, { field: 'color', ...getEnumColumnParams(colorEnum), } ];

或者您可以創建列類型並在列定義中分配type: 'boolColumn'等，就像我在上面的代碼和框示例中所做的那樣