为 AG Grid agSetColumnFilter 填充过滤器值的问题

Question

我正在尝试填充 agSetColumnFilter 的值，但我收到一个错误，我无法在文档中（或在线任何地方）找到任何内容。有没有人遇到过这个问题？

这是列定义的样子：

columnDefs.push({
                headerName: col.name,
                field: col.name,
                def: col,
                rowGroup: k < groupedColumnCount ? true : false,
                pinned: k < _this.groupBy.length ? 'left' : null,
                lockPinned: k < _this.groupBy.length ? true : false,
                hide: k < groupedColumnCount ? true : false,
                suppressToolPanel: _this.groupBy.length ? true : false,
                valueGetter: function(data){
                    if(data.data){
                        var def = data.colDef.def;
                        var value = data.data[data.colDef.field];
                        if(value){
                            return value.value;
                        }else{
                            return null;
                        }
                    }else{
                        return data.value;
                    }
                },
                valueFormatter: function(data){
                    if(data.data){
                        var def = data.colDef.def;
                        var value = data.data[data.colDef.field];
                        if(!value) return null;

                        if(value.formatted){
                            _this.cache[data.colDef.field + value.value] = value.formatted;    
                        }

                        return value.formatted ? value.formatted : value.value;
                    }else{
                        if(_this.cache[data.colDef.field + data.value]){
                            return _this.cache[data.colDef.field + data.value];
                        }else{
                            return data.value;
                        }
                    }
                },
                keyCreator: function(params){
                    console.log(params);
                },
                filter: 'agSetColumnFilter', 
                filterParams: {
                    values: function (params) {
                        params.success([{
                            $uri: 'nhuihi',
                            value: {
                                $value: 'some text'
                            }
                        }]);
                    }
                }
            });

我现在只打印出 keyCreator 参数，因为我不知道数据中实际可用的内容。这个想法是我可以使用从服务器返回的复杂对象设置值并显示格式化的值而不是键。这是我遇到的错误。

ag-grid-enterprise.min.noStyle.js:formatted:27684 Uncaught TypeError: Cannot read property 'onFilterValuesReady' of undefined
    at t.setFilterValues (ag-grid-enterprise.min.noStyle.js:formatted:27684)
    at e.modelUpdatedFunc (ag-grid-enterprise.min.noStyle.js:formatted:27609)
    at e.onAsyncValuesLoaded (ag-grid-enterprise.min.noStyle.js:formatted:27917)
    at values (comparison-table-v7.js:1253)
    at e.createAllUniqueValues (ag-grid-enterprise.min.noStyle.js:formatted:27909)
    at new e (ag-grid-enterprise.min.noStyle.js:formatted:27867)
    at t.initialiseFilterBodyUi (ag-grid-enterprise.min.noStyle.js:formatted:27608)
    at t.init (ag-grid-enterprise.min.noStyle.js:formatted:18945)
    at e.initialiseComponent (ag-grid-enterprise.min.noStyle.js:formatted:10602)
    at e.createAgGridComponent (ag-grid-enterprise.min.noStyle.js:formatted:10574)

这里也有一个测试用例。我只是通过 AG Grid 修改了示例。 https://plnkr.co/edit/GURQHP0KKFpJ9kwaU83M?p=preview

如果你打开控制台，当你点击运动员过滤器时，你会看到一个错误。

也在 GitHub 上报道：https://github.com/ag-grid/ag-grid/issues/2829

Answer 1

如果您需要在没有异步请求的情况下配置过滤器值

filterParams: {
    values: getFilterValuesData()
}

getFilterValuesData(){
    //data preparation 
    //little bit modified sample to present that you can handle your logic here
    let data = [];
    [
        'John Joe Nevin',
        'Katie Taylor',
        'Paddy Barnes',
        'Kenny Egan',
        'Darren Sutherland',
        'Margaret Thatcher',
        'Tony Blair',
        'Ronald Regan',
        'Barack Obama'
    ].forEach(i=>{
        data.push(i);
    });
        return data;
    }

如果需要为数据准备发出异步请求，您可以使用callback 函数：

filterParams: {
    values: (params)=>{
        setTimeout(()=>{  -- setTimeout on this case only for async request imitation
            params.success(['value 1', 'value 2'])
        }, 5000)
    }
}

注意：params.success(...) 只能用于异步请求

文档：ag-grid Asynchronous Values