如何使用 React 在 Ag 网格滤波器中获取滤波器输入值？

Question

我正在尝试获取用户键入的值作为带有 AG 网格的过滤器的输入， 就像在带有 onChange 函数的简单输入中一样。

我试过 onFilterChanged，但没能捕捉到值。

<div style={containerStyle}>
          <div style={gridStyle} className="ag-theme-alpine">
            <AgGridReact
              rowData={all.flat().reverse()}
              columnDefs={columnDefs}
              groupIncludeFooter={true}
              groupIncludeTotalFooter={true}
              defaultColDef={defaultColDef}
              animateRows={true}
              onFilterChanged={(e: any) =>
                console.log("filter has changed", e)
              }
            ></AgGridReact>
          </div>
        </div>

感谢您的帮助。

Answer 1

gridRef

是必要的，如果每列中的任何一列包含过滤后的字符串

，则循环所有列

html

    ref={gridRef}
    onFilterChanged={handleFilter}

jsx

const GridExample = () => {
    const gridRef = useRef();
///...columndefs and rowdata
}
this.handleFilter=()=> {
    alert(gridRef.current.api.getFilterInstance('athlete').appliedModel.filter);
  };

如果第二个过滤器处于活动状态，

gridRef.current.api.getFilterInstance('athlete').appliedModel.condition1.filter

和

gridRef.current.api.getFilterInstance('athlete').appliedModel.condition2.filter

工作演示

编辑添加：

gridRef.current.api.getFilterModel()

是可能的，它输出所有给定过滤器的 json 对象。

{
            'athlete':
            {
                   condition1:
                   {
                          filterType: 'text',
                          type: 'contains',
                          filter: 'a'
                   },
                   condition2:
                   {
                          filterType: 'text',
                          type: 'contains',
                          filter: 'b'
                   },
                   filterType: "text",
                   operator: "AND"
            },
            'age':
            {
                   filterType: 'text',
                   type: 'contains',
                   filter: 'c'
            },
}

如果它是全局过滤器（从网格外的文本框过滤），

gridRef.current.api.filterManager.quickFilterParts

可以

Answer 2

我们可以使用

params.api.getFilterModel()

获取单个列的文件管理器值

const cellRender = params => {
    const filterInput = params.api.getFilterModel().Name?.filter
    const value = params.value

    if (filterInput && value) {
        return <Name name={String(value)} highlight={String(filterInput)} />
    }
    return value
}


export default [
    {
        cellRenderer: cellRender,
        field: 'name',
        headerName: 'Name',
        headerTooltip: 'Name',
        tooltipField: 'name'
    }
]