javascript - ag-grid 自定义过滤器添加了清除过滤器按钮。JS 不是 Angular
问题描述
使用 ag-grid 站点上的示例,我编写了一个基于 RAG 状态的过滤器。值可以是未定义、红色、琥珀色、绿色或完整。
使用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> ' +
'<span class="icon icon-rag-s-red" data-value="red"></span> ' +
'<span class="icon icon-rag-s-yellow" data-value="yellow"></span> ' +
'<span class="icon icon-rag-s-green" data-value="green"></span> ' +
'<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”,它来自清除按钮上的数据过滤器属性。
我一直在反复讨论这个问题,似乎找不到一个清晰的教程或代码示例来完全满足我的要求。
非常感谢所有帮助..
干杯
解决方案
经过大量摆弄代码后,我发现您实际上需要 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();
});
推荐阅读
- git - 关于在 PR 审核后工作流程如何进行更改以及 git rebase 的问题
- c# - 肥皂错误:序言中不允许内容
- ftp - 无法在 Apache Airflow 中使用 FTPHook 连接到 FTP 服务器
- java - Java SimpleDateFormat 未检测到月份
- node.js - 使用 MERN 堆栈构建相对路径的最合适方法是什么?
- java - 字段 'user_id' 没有默认值,但设置为 auto_increment
- node.js - Expressjs中使用passport-google-token刷新令牌
- python - 如何使用循环 Pandas 向列添加值
- c# - 字符串中的字符索引错误
- nginx - 如何让 NGINX 反向代理和应用程序