时间戳

首页 > 解决方案 > 为 AG Grid agSetColumnFilter 填充过滤器值的问题

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

问题描述

我正在尝试填充 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

标签： ag-grid

解决方案

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

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

推荐阅读