唐家三少_Extjs Grid 中給已經(jīng)添加過(guò)Filter的列增加標識| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

Extjs Grid 中給已經(jīng)添加過(guò)Filter的列增加標識

Extjs Grid 中給已經(jīng)添加過(guò)Filter的列增加標識
有用戶(hù)反映， 在Grid 中做過(guò)filter 之后， 從表格上看不去哪些地方曾經(jīng)做過(guò)filter.
舉例來(lái)說(shuō)：
![](/upload/picture/2022-09-28/upload_9be127c52c670f37155a9cb0575a03f3.png)

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

所以要求當然是希望可以看出來(lái)哪些欄位有做過(guò)filter  了。

### Extjs 本身的處理方式
其實(shí)Extjs 本身就有提供相關(guān)的解決方案。 之所以沒(méi)有出現效果，可能是沒(méi)有導入相關(guān)的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;
}
```

可以看出， 做過(guò)filter 的欄位會(huì )被標識成： 斜體， 加粗。 看一下， 效果
![](/upload/picture/2022-09-28/upload_bf357a5f4403e4bbc76e6458f5e0415c.png)

### 更多的效果
以上， 雖然可以標識以做區分， 但是對于習慣使用Excel 表格的用戶(hù)來(lái)說(shuō)， 以圖標方式來(lái)表示已做過(guò)過(guò)濾的欄位更直觀(guān)一些。
就像：

![](/upload/picture/2022-09-28/upload_9b7686f62a8988f3eaa948b5e65bdeb3.png)
 繼續改進(jìn).....

在Extjs Grid 的使用中， 當鼠標放在Grid 的Header的是， 會(huì )有一個(gè)三角形的圖標按鈕。
![](/upload/picture/2022-09-28/upload_207f31f2bbd5dcc9361c77d51fded26e.png)

是否可以， 如果有做了filter 的話(huà)， 就把這個(gè)按鈕顯示出來(lái)呢？

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

不難看出：
1. trigger 這個(gè)區塊默認都是生成的， 只是在鼠標放上去的時(shí)候 display設置為block, 鼠標移走的時(shí)候display 為none（不顯示）
再結合上面
如果有添加filter 的話(huà)， 就會(huì )用到 ux-filtered-column 這個(gè)CSS.
所以如果添加
```css
.ux-filtered-column.x-column-header-trigger{
display:block;
}
```

的話(huà)， 應該就可以讓三角的按鈕在有filter 的時(shí)候就顯示了。
果然， 結果如預期
![](/upload/picture/2022-09-28/upload_62b51c05951525c1dd0779b6d53ce5b5.png)

如果有其他的需求， 比如要把三角換成漏斗，也可以沿襲以上的思路來(lái)進(jìn)行。

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

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

Extjs Grid 中給已經(jīng)添加過(guò)Filter的列增加標識

網(wǎng)站導航