EXTJS GridPanel 右鍵複製當前選中單元格
阿新 • • 發佈:2019-01-24
其實呢不用這麼麻煩的,EXTJS API其實提供了相應的事件讓開發者可以通過新增監聽事件來到達選中當前單元格並取得當前單元格的內容。下面以右擊為例(左鍵單擊相同),具體的實現功能是右鍵點選當前單元格選中當前單元格並彈出右鍵選單,右鍵選單有複製、修改和刪除3個常見功能,具體效果如下:
1、首先實現一個右鍵選單(gridpanel實現略過)
var rightMenu = new Ext.menu.Menu( { id : 'rightClickCont', items : [{ id:'rMenu1', text:'復 制', icon:'../img/icon/copy.png', handler:copy },{ id:'rMenu2', text:'修 改', icon:'../img/icon/modify.png', handler:modify }, { id:'rMenu3', text:'刪 除', icon:'../img/icon/clear.png', handler:del }] });
2、為gird新增監聽事件(注意:下面語句寫在Ext.onReady(function(){}中)
//右擊行觸發事件
gridPanel.addListener('rowcontextmenu', rightClickFn);
這裡的'rowcontextmenu'即右擊行(row)時觸發,使用這個事件的目的是為了取得當前行的主鍵,以便實現修改和刪除功能,若只是純粹想實現右鍵複製的功能可以不用新增這個事件,後文介紹。
3、實現監聽事件的函式rightClickFn
function rightClickFn(gridPanel, rowIndex, e) { e.preventDefault(); rightMenu.showAt(e.getXY()); //gridpanel預設右擊是不會選擇當前行的,所以必須新增這句程式碼 gridPanel.getSelectionModel().selectRow(rowIndex); }
4、實現刪除和修改功能
這裡可以根據以下程式碼取得當前行的資料:
var record = gridPanel.getSelectionModel().getSelected();
功能的具體實現不是本文的在重點,請按照需求自己實現。但是這裡可以給你一個簡單的修改功能的模組供大家參考:
function modify(rowIndex) { var record = gridPanel.getSelectionModel().getSelected(); //以下程式碼為點選修改後帶出該條記錄資訊 Ext.getCmp("title").setValue(record.get("title")); if(record == undefined) { Ext.Msg.alert('提示資訊','未選擇任何資料!'); } else { var win = new Register.MicWin({ title:"修改文章", buttons:[{ text:"確 定", handler:function() { Ext.Ajax.request({ url:'article!updateArticle.action', params:{ //傳遞引數 }, success:function(request){ Ext.Msg.alert('提示資訊','文章修改成功!'); win.close(); store.reload(); }, failure:function(){ Ext.Msg.alert('錯誤資訊','系統錯誤'); } }) } },{ text:"取 消", handler:function(){//點選時觸發的事件 win.close(); } }] }); win.show(); } }
5、為grid新增監聽單元格事件:
gridPanel.addListener('cellcontextmenu',cellclick);
這裡的'cellcontextmenu'即右擊單元格(cell)時觸發,然後實現cellclick函式。注意這裡的cellclick()函式與上文中rightClickFn()函式的引數,可以看到這裡的引數多了一個columnIndex,根據columnIndex來定位單元格的位置。根據以下程式碼可以取得當前單元格的值。
//獲取選中行選中列的值
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
//info為一個全域性變數
info = record.get(fieldName);
}
6、實現複製功能
function copy() {
var record = gridPanel.getSelectionModel().getSelected();
if(record == undefined) {
Ext.Msg.alert('提示資訊','未選擇任何資料!');
}
else {
copyToClipboard(info);
}
}
到這裡所有的功能基本上就全部實現了,不用新增新的css也可以解決這個問題,copyToClipboard方法的程式碼為網上拷貝,具體實現下面給出有具體程式碼,大家可以參考。
function copyToClipboard(txt) {
if(window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
} else if(navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被瀏覽器拒絕!\n請在瀏覽器位址列輸入'about:config'並回車\n然後將'signed.applets.codebase_principal_support'設定為'true'");
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
}