ag-grid 自定义过滤器添加了清除过滤器按钮。 JS 不是 Angular答案

【问题标题】：ag-grid custom filter adding a clear filter button. JS not Angularag-grid 自定义过滤器添加了清除过滤器按钮。 JS 不是 Angular
【发布时间】：2019-04-12 21:20:03
【问题描述】：

使用 ag-grid 网站上的示例，我编写了一个基于 RAG 状态的过滤器。值可以是 Undefined、Red、Amber、Green 或 Complete。

使用https://www.ag-grid.com/javascript-grid-filter-component/ 的 PersonFilter 示例，我正在使用一个数组向其中添加单击的值，然后过滤网格。这真的很好用。但是，我打算通过清除按钮清除过滤器。

这是我目前的代码：

RagFilter.prototype.setupGui = function (params) {

            this.filterText = [];
            this.gui = document.createElement('div');
            this.gui.innerHTML =
                '<div style="padding: 6px; width: 150px;">' +
                    '<div><h3>RAG Filter</h3></div>' +
                    '<div><span class="icon icon-rag-s-undefined" data-value="undefined"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-red" data-value="red"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-yellow" data-value="yellow"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-green" data-value="green"></span>&nbsp;' +
                        '<span class="icon icon-rag-s-blue" data-value="blue"></span>' +
                        '<a href="#" id="clear_filter" class="btn btn-primary btn-sm" data-filter="rag">CLEAR</a>';

            var that = this;
            $('body').on('click', '.icon',  function(e){
                if (that.filterText.indexOf($(e.target).data('value'))) {
                    that.filterText.push($(e.target).data('value'));
                }
                params.filterChangedCallback();
            });
            $('body').on('click', '#clear_filter',  function(e){
                e.preventDefault();
                var filter = $(this).data('filter');
                var filterComponent = params.api.getFilterInstance(filter);
                filterComponent.setModel(null);
                this.filterText = null;

            });
        };

此方法取自 https://www.ag-grid.com/javascript-grid-filter-component/ 使用 PersonFilter 的示例。

我也尝试了过滤器代码之外的按钮的点击事件处理程序：

$('body').on('click', '#clear_filter',  function(e){
                e.preventDefault();
                var filter = $(this).data('filter');
                var filterComponent = gridOptions.api.getFilterInstance(filter);
                filterComponent.setModel(null);
            });

并且我一直收到变量 filterComponent 的未定义错误。变量过滤器设置为“rag”，它来自清除按钮上的数据过滤器属性。

我一直在这个问题上兜圈子，似乎找不到一个清晰的教程或代码示例可以完全满足我的要求。

非常感谢所有帮助..

干杯

【问题讨论】：

标签： javascript ag-grid

【解决方案1】：

经过大量摆弄代码后，我发现您实际上需要 colDef.colId 值，而不是文档建议的字段名称：

$('body').on('click', '#clear_filter',  function(e){
                e.preventDefault();
                var filterComponent = params.api.getFilterInstance(params.colDef.colId);
                that.filterText = null;
                params.api.onFilterChanged();
            });

【讨论】：