【问题标题】:ag-grid: pre-setting a (default) filter for the gridag-grid:为网格预先设置(默认)过滤器
【发布时间】:2017-12-08 12:42:16
【问题描述】:

我有一个 react 应用程序,一切似乎都运行良好。 尽管我目前卡住了,但我想添加一个额外的过滤功能。

谁能提供一些关于如何预设过滤器的建议

使用我见过的示例过滤方法in this article我尝试实现一个基本示例,尽管它不起作用

this.state = {
   gridOptions: {
  .
  .
  .
      onGridReady: this.initialFilter
}, 

initialFilter(){
    tmp = {Currency: {type: 'contains', filter: 'usd'}};
    this.state.gridOptions.api.setFilterModel(tmp);
    this.state.gridOptions.api.onFilterChanged();

} 

我期望运行这个是货币列将被过滤为包含过滤文本usd的条件

================================================ == 编辑: 尝试后

initialFilter(){
    let hi=this.state.gridOptions.api.getFilterInstance('Currency');
    hi.setType('contains');
    hi.setFilter('usd');
    hi.onFilterChanged();
} 

什么都没有发生 + 没有错误

但是当我在现有方法中添加代码以更改过滤器时(当我手动添加过滤器时):

onAfterFilterChanged() {
    let hi=this.state.gridOptions.api.getFilterInstance('Currency');
    hi.setType('contains');
    hi.setFilter('usd');
    hi.onFilterChanged();

    this.setState({
        rowsToDisplay: this.state.gridOptions.api.filterManager.rowModel.rowsToDisplay.length,
        filtering: this.props.report.views.filters
    });
    this.props.filterme(this.state.filtering);      
}

然后我得到以下错误

Full error: Uncaught RangeError: Maximum call stack size exceeded
at RowRenderer.workOutFirstAndLastRowsToRender (dme-ui-buidle.js:13181)
at RowRenderer.drawVirtualRows (dme-ui-buidle.js:13178)
at RowRenderer.refreshAllVirtualRows (dme-ui-buidle.js:13138)
at RowRenderer.refreshView (dme-ui-buidle.js:13034)
at RowRenderer.onModelUpdated (dme-ui-buidle.js:12979)
at RowRenderer.onPageLoaded (dme-ui-buidle.js:12931)
at dme-ui-buidle.js:2684
at Array.forEach (<anonymous>)
at EventService.dispatchEvent (dme-ui-buidle.js:2683)
at PaginationProxy.onModelUpdated (dme-ui-buidle.js:27264)

【问题讨论】:

    标签: javascript reactjs ag-grid ag-grid-react


    【解决方案1】:

    根据此处的文档:

    https://www.ag-grid.com/javascript-grid-filtering/

    还有这个笨蛋:

    https://plnkr.co/edit/0NoAA9cEZa1Zr9brMZ2I?p=info

    这样的事情应该可以解决问题:

    var yourFilterComponent = gridOptions.api.getFilterInstance('youfieldname');
    yourFilterComponent.setType('contains');
    yourFilterComponent.setFilter('usd');
    yourFilterComponent.onFilterChanged();
    

    【讨论】:

    • 我试过这样做(唯一的区别是我使用“this.state.gridOptions.......”作为我的过滤器组件,但我仍然不断收到错误:Uncaught RangeError:Maximum调用堆栈大小超出了我;如果我像在原始帖子中那样将代码放入它自己的方法中,则不确定是什么原因造成的,然后什么也没有发生(也没有错误)。如果我将代码放入现有方法 onAfterFilterChanged()然后我看到过滤器应用了,但我得到了那个错误,它阻止我手动应用其他过滤器:(
    • 会不会是我需要使用你指定的代码,但是使用某种方法?
    • 在尝试后用我的结果更新了原始帖子
    • 看来是订购问题。代码需要在网格准备好之后的某个时候应用,但在我手动在顶部应用我自己的过滤器之前。我这样说是因为我将代码复制/粘贴到与行选择相关的方法中,当我单击一行时,网格按预期过滤。我只需要找出将代码放在哪里
    猜你喜欢
    • 2017-11-19
    • 2017-01-10
    • 2012-12-28
    • 1970-01-01
    • 2018-09-02
    • 1970-01-01
    • 2017-01-14
    • 2019-12-29
    • 2019-02-28
    相关资源
    最近更新 更多