应用过滤器后在 Extjs 网格列中添加过滤器图标一次

Posted 2023-02-26

【中文标题】应用过滤器后在 Extjs 网格列中添加过滤器图标一次

【英文标题】：Adding Filter Icon in Extjs Grid Column once after Filter is applied

【发布时间】：2016-08-29 15:26:04

【问题描述】：

无论如何我们可以使用过滤器突出显示列。与我们进行排序时相同的方式，将图标添加到各个列级别以通知用户。

提前致谢。

【参考方案1】：

这个问题有点像Filter Header Update 任何方式来实现我的方法是首先你需要准备一个具有你想要的图像的css。 您的 css 代码看起来像或根据您的需要进行更改：

.filtered-column     
 background:url(http://dev.toadformysql.com/webhelp/...fiedFilter.png) no-repeat !important; 
 background-position: calc(100% - 5px) 3px !important;

在过滤器类中调用css

newCls : 'filtered-column',

然后在你自己的updateColumnHeadings 方法中使用下面的代码。

updateColumnHeadings : function () 
    var view = this.grid.getView(),
        i, len, filter;
    if (view.mainHd) 
        for (i = 0, len = view.cm.config.length; i < len; i++) 
            filter = this.getFilter(view.cm.config[i].dataIndex);
            Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.newCls); // In this line we are adding the newCls which will aply for filter.
        
    
,

注意：我检查了我的过滤器，它可以工作。如果您的过滤器是根据您的要求自定义的，那么它可能无法正常工作，但理想情况下这是更新应用的过滤器标题的方式。