現(xiàn)在是這么個(gè)問(wèn)題，在開發(fā)中表格是動(dòng)態(tài)出來(lái)的，就是標(biāo)準(zhǔn)板是全部字段列出，客戶要根據(jù)情況列出自己想要的，在增加操作頁(yè)面的同時(shí)要是能用前臺(tái)自帶的功能直接保存到后臺(tái)就好了，現(xiàn)在的列顯示和隱藏是不回發(fā)的。

1.FineUI引用的extjs是ext-part1.js，這就不說(shuō)了，以前截過(guò)圖，這個(gè)文件是壓縮的，參數(shù)也是簡(jiǎn)化的不好看，其實(shí)這個(gè)就是ext-all.js，ext-all哪來(lái)的呢，就是extjs官方實(shí)例里下的，下來(lái)之后也是壓縮的，旁邊還有個(gè)不壓縮的，ext-all-debug.js ，完全可以看，那我直接看它就等于看ext-part1.js了，下面我要找到生成grid表頭的類，搜Ext.grid.一個(gè)一個(gè)找看到有Ext.grid.header，header就是頭的意思，再在這里找，找到getColumnMenu，恩，字面意思就能看出得到列菜單，怎么確定呢，看到個(gè)屬性是checkHandler 選擇的意思，就是選擇事件，觸發(fā)的是onColumnCheckChange，

onColumnCheckChange:function(checkItem, checked){ var header =Ext.getCmp(checkItem.headerId); header[checked ?'show':'hide'](); },

　　

看到show，hide ，顯示和隱藏的意思。進(jìn)一步測(cè)試，找到ext-part1.js下onColumnCheckChange，改了它，加個(gè)alert('1'),保存，刷新，當(dāng)我勾選列隱藏和顯示時(shí)彈出1，觸發(fā)成功，就是改它。 2.位置找到了就是改，直接改ext-part1.js？那ext-part2就失去意義了，ext-part2是干嘛的，FineUI自己重寫替換了好多方法，也新增了好多方法方便交互或修補(bǔ)bug，我直接找到了Ext.grid.Panel，就照著這個(gè)重寫就行，看到

if(Ext.grid.Panel){ Ext.override(Ext.grid.Panel,{

　　

分析下，如果是Ext.grid.Panel就是引用的是Ext.grid.Panel類，override搜了下API就是覆蓋重寫的意思，那好，直接重寫onColumnCheckChange，onColumnCheckChange上面的列是Ext.grid.header.Container，那么在Ext.gird.Panel上面寫：

if(Ext.grid.header.Container){ Ext.override(Ext.grid.header.Container,{ onColumnCheckChange:function(checkItem, checked){ var header =Ext.getCmp(checkItem.headerId); header[checked ?'show':'hide'](); F.customEvent("觸發(fā)后臺(tái)操作"); } }); }

　　

又用到customEvent，咋用就不寫了功能是Alert.Show()，編譯，保存，刷新，成功觸發(fā)后臺(tái)方法。 3.干觸發(fā)了沒(méi)參數(shù)我保存啥，看見接受了兩個(gè)參數(shù)，checkItem和checkd，意思是項(xiàng)和選擇狀態(tài)，checkItem可定就是選擇的項(xiàng)，他都有什么屬性呢，還是找到ext-all-debug.js下這個(gè)方法，

for(; i < itemsLn; i++){ item = items[i]; menuItem =newExt.menu.CheckItem({ text: item.text, checked:!item.hidden, hideOnClick:false, headerId: item.id, menu: item.isGroupHeader ?this.getColumnMenu(item):undefined, checkHandler:this.onColumnCheckChange, scope:this });

　　

首先循環(huán)項(xiàng)，就是循環(huán)的列頭總數(shù)，一個(gè)一個(gè)來(lái)，創(chuàng)建一個(gè)菜單選擇元素，然后就是屬性，那checkItem的屬性就是menuItem的屬性，那么有

if(Ext.grid.header.Container){ Ext.override(Ext.grid.header.Container,{ onColumnCheckChange:function(checkItem, checked){ var header =Ext.getCmp(checkItem.headerId); header[checked ?'show':'hide'](); F.customEvent("觸發(fā)后臺(tái)操作保存該列隱藏顯示狀態(tài)，列名："+checkItem.text+" 列ID :"+checkItem.headerId+" 選擇狀態(tài)："+checked+";gridID:"+this.grid.id); } }); }

　　

在試試，觸發(fā)后臺(tái)方法，輸出結(jié)果為預(yù)期。 更改了ext-part2.js就要保存好，如果項(xiàng)目里用了，升級(jí)的時(shí)候覆蓋掉就沒(méi)有了，另外還要介紹自己修改和添加FineUI控件的屬性，好像以前提到過(guò)在ASP.NET-FineUI開發(fā)實(shí)踐-6(三) 7 里，處理了TriggerBox的回車觸發(fā)，怎么找到的就是轉(zhuǎn)到定義找到FineUI項(xiàng)目的文件再搜索就可以了，用到的不是特別多，可以結(jié)合ext-part2.js再次做一些改進(jìn)，就不細(xì)談了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/shiworkyue/p/4036596.html

總結(jié)

以上是生活随笔為你收集整理的ASP.NET-FineUI开发实践-9(四)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。