Extjs Grid 中给已经添加过Filter的列增加标识| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Extjs Grid 中给已经添加过Filter的列增加标识

Extjs Grid 中给已经添加过Filter的列增加标识
有用户反映， 在Grid 中做过filter 之后， 从表格上看不去哪些地方曾经做过filter.
举例来说：
![](/upload/picture/2022-09-28/upload_9be127c52c670f37155a9cb0575a03f3.png)

对Name 做过filter 之后的效果：
![](/upload/picture/2022-09-28/upload_b8f4c7dcb58e8a7f5c515a6aea5e41df.png)

所以要求当然是希望可以看出来哪些栏位有做过filter  了。

### Extjs 本身的处理方式
其实Extjs 本身就有提供相关的解决方案。 之所以没有出现效果，可能是没有导入相关的CSS.

![](/upload/picture/2022-09-28/upload_d3feb73d049a15560df342c388e690a6.png)

内容如下：
```css
/*
 * GridFilters Styles
 */
.ux-filtered-column {
font-style: italic;
font-weight: bold;
}
.ux-gridfilter-text-icon {
background-image: url(../images/find.png) !important;
}
```

可以看出， 做过filter 的栏位会被标识成： 斜体， 加粗。 看一下， 效果
![](/upload/picture/2022-09-28/upload_bf357a5f4403e4bbc76e6458f5e0415c.png)

### 更多的效果
以上， 虽然可以标识以做区分， 但是对于习惯使用Excel 表格的用户来说， 以图标方式来表示已做过过滤的栏位更直观一些。
就像：

![](/upload/picture/2022-09-28/upload_9b7686f62a8988f3eaa948b5e65bdeb3.png)
 继续改进.....

在Extjs Grid 的使用中， 当鼠标放在Grid 的Header的是， 会有一个三角形的图标按钮。
![](/upload/picture/2022-09-28/upload_207f31f2bbd5dcc9361c77d51fded26e.png)

是否可以， 如果有做了filter 的话， 就把这个按钮显示出来呢？

查看一下源码CSS处理
![](/upload/picture/2022-09-28/upload_d31348b5800a079690c8b7adc59c8f41.png)

不难看出：
1. trigger 这个区块默认都是生成的， 只是在鼠标放上去的时候 display设置为block, 鼠标移走的时候display 为none（不显示）
再结合上面
如果有添加filter 的话， 就会用到 ux-filtered-column 这个CSS.
所以如果添加
```css
.ux-filtered-column.x-column-header-trigger{
display:block;
}
```

的话， 应该就可以让三角的按钮在有filter 的时候就显示了。
果然， 结果如预期
![](/upload/picture/2022-09-28/upload_62b51c05951525c1dd0779b6d53ce5b5.png)

如果有其他的需求， 比如要把三角换成漏斗，也可以沿袭以上的思路来进行。

另外， 除了扩展Extjs 本身的css 之外， 也可以定义自己的CSS
![](/upload/picture/2022-09-28/upload_8e51be5356e7978b712533c3d230e4c1.png)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Extjs Grid 中给已经添加过Filter的列增加标识

网站导航