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

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

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

　　

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

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ā)后臺操作"); } }); }

　　

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

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ù)，一個一個來，創(chuàng)建一個菜單選擇元素，然后就是屬性，那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)，列名："+checkItem.text+" 列ID :"+checkItem.headerId+" 選擇狀態(tài)："+checked+";gridID:"+this.grid.id); } }); }

　　

在試試，觸發(fā)后臺方法，輸出結(jié)果為預(yù)期。 更改了ext-part2.js就要保存好，如果項(xiàng)目里用了，升級的時候覆蓋掉就沒有了，另外還要介紹自己修改和添加FineUI控件的屬性，好像以前提到過在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(四)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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