Spread JS 本身支持豐富的右鍵菜單功能叙凡，包括單元格區(qū)域尤仍、行頭區(qū)域、列頭區(qū)域狭姨、角標(biāo)區(qū)、表單標(biāo)簽區(qū)域等都可以用右鍵呼出對應(yīng)的右鍵菜單苏遥，很厲害吧饼拍。但更驚喜的是，Spread JS還提供了自定義這些右鍵菜單的方法田炭，讓用戶可以方便师抄、自由地添加扰才、刪除衙傀、重新排序右鍵菜單檀训，以及更改右鍵菜單原本的功能茬腿，甚至定義自己需要的右鍵菜單的樣式勋乾！
注意：本博客適用Spread JS版本是V11及以上版本姑廉。
了解SpreadJS右鍵菜單
SpreadJS右鍵菜單逐样，分布于以下幾個區(qū)域灭返，對應(yīng)了各個區(qū)域所支持的操作：
Sheet標(biāo)簽頁區(qū)域（sheetTab）：
角標(biāo)區(qū)域（corner）：
行頭區(qū)域（rowHeader）：
列頭區(qū)域（colHeader）：
數(shù)據(jù)編輯區(qū)域（viewport）：
切片器區(qū)域（slicer）：
以上的所有右鍵菜單功能項景用，都是定義在一個數(shù)組對象menuData中涵叮，下列代碼展示了如何獲取這個數(shù)組：
varspread =newGC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:1});varmenuData = spread.contextMenu.menuData;
用console打印出這個對象的結(jié)構(gòu)，如圖所示：
上圖中展示出的數(shù)組元素伞插，就是所有右鍵菜單的元素了割粮。每個元素都是以json對象的方式被定義的，其中包括幾類元素：
不含子菜單媚污，單擊即執(zhí)行的菜單項（代表項是“復(fù)制”）：
包含屬性：
command ：代表了點擊此菜單項后只需的命令操作
iconClass ：代表了此菜單項左側(cè)icon的樣式
name ：菜單項的名稱（不可重復(fù)）
text ：菜單項顯示的文字
workArea ：工作區(qū)域舀瓢，“復(fù)制”操作的可用區(qū)域為viewport + colHeader + rowHeader + slicer + corner。
含有子菜單耗美，點擊子菜單項執(zhí)行的菜單項（代表項是“排序”）：
與不含子菜單的項京髓，區(qū)別在于沒有command屬性航缀，而多了一個subMenu屬性，subMenu是一個數(shù)組元素朵锣，每一個都代表了一項可執(zhí)行命令谬盐，如圖：
這個子菜單是可以繼續(xù)擴(kuò)展二級子菜單甚至多級子菜單的，只需要給子菜單繼續(xù)添加subMenu屬性即可诚些。如圖：
組菜單頭飞傀，表示一個組菜單的頭部（代表項是“粘貼選項”）：
組菜單頭依然不是可執(zhí)行的項，但是它代表了一組菜單項的頭部诬烹，以type:“groupHeader”來定義砸烦，如圖：
組菜單元素，表示組菜單的元素項（代表項是“全部粘貼”）：
組菜單元素是隸屬于組菜單頭元素的元素項绞吁，它們在menuData中是獨立的元素幢痘，但是它們包含group屬性，這個group屬性與組菜單頭元素的name相同家破，指定了其所屬的組颜说。
分隔符，表示右鍵菜單中的橫線（separator）：
只有一個屬性的元素汰聋，指定了它就是作為視覺分隔符而定義的门粪，如圖：
自定義右鍵菜單示例解析
OK，經(jīng)過以上的分析烹困，相信大家對SpreadJS右鍵菜單組件已經(jīng)有了充分的了解玄妈，下面我用一個Demo展示一下具體該如何對右鍵菜單實現(xiàn)自定義。
本例中展示了三個操作髓梅，分別是為右鍵菜單添加項拟蜻、刪除右鍵菜單的兩個指定項、自定義右鍵菜單的“粘貼”項枯饿。以下分別解析這三個案例的代碼：
1酝锅、 為右鍵菜單添加一個項：
```js/*
*? 定義一個命令，作為右鍵菜單項的執(zhí)行邏輯
* */spread.commandManager().register("insertRowsBehind",? ? {canUndo:true,execute:function(context, options, isUndo){varCommands = GC.Spread.Sheets.Commands;// 在此加cmdoptions.cmd ="insertRowsBehind";if(isUndo) {? ? ? ? ? ? ? ? Commands.undoTransaction(context, options);returntrue;? ? ? ? ? ? }else{? ? ? ? ? ? ? ? Commands.startTransaction(context, options);varsheet = spread.getActiveSheet();varsels = sheet.getSelections();if(sels && sels.length >0){for(vari=0; i
2奢方、 刪除右鍵菜單的兩個指定項：
```jsvarmenuData = spread.contextMenu.menuData;varnewMenuData = [];/*
*? 注意：這里沒有直接刪除原數(shù)組屈张，而是創(chuàng)建一個新數(shù)組，
*? 原因是在遍歷數(shù)組時不能同時刪除數(shù)組項袱巨，這樣會導(dǎo)致程序運算結(jié)果錯誤阁谆。
* */menuData.forEach(function(item){if(item){if(item.name ==="gc.spread.insertSheet"||? ? ? ? ? ? item.name ==="gc.spread.deleteSheet"){return;? ? ? ? }? ? ? ? newMenuData.push(item);? ? }});// 將新數(shù)組賦予spread的右鍵菜單屬性spread.contextMenu.menuData = newMenuData;```以上代碼演示了如何刪除掉sheet標(biāo)簽右鍵菜單中的“插入”和“刪除”項，如圖：
3愉老、 自定義右鍵菜單的“粘貼”項：
```jsvarpaste = {iconClass:"gc-spread-pasteAll",name:"gc.spread.pasteOptions",text:"粘貼",command:"gc.spread.contextMenu.pasteAll",workArea:"viewportcolHeaderrowHeadercorner"};varmenuData = spread.contextMenu.menuData;varnewMenuData = [];menuData.forEach(function(item){if(item){if(item.name ==="gc.spread.pasteOptions"||? ? ? ? ? ? item.group ==="gc.spread.pasteOptions"){return;? ? ? ? }? ? ? ? newMenuData.push(item);? ? }});newMenuData.unshift(paste);spread.contextMenu.menuData = newMenuData;```最后一段代碼场绿，展示了如何將“粘貼選項”組改為“粘貼”項，如圖：
經(jīng)過以上的解釋和Demo分析嫉入，相信大家都掌握了基本的自定義右鍵菜單的方法焰盗。但是右鍵菜單還有更加強(qiáng)大的功能璧尸，它還允許用戶自定義右鍵菜單的樣式！如圖：
關(guān)于這部分內(nèi)容熬拒，我將在《深入解析如何自定義SpreadJS右鍵菜單（下）》一文中爷光，結(jié)合一個實用的Demo來做出解答。
