下載SpreadJS最新試用版

Spread JS本身支持豐富的右鍵菜單功能，包括單元格區域、行頭區域、列頭區域、角標區、表單標簽區域等都可以用右鍵呼出對應的右鍵菜單。Spread JS還提供了自定義這些右鍵菜單的方法，讓用戶可以方便、自由地添加、刪除、重新排序右鍵菜單，以及更改右鍵菜單原本的功能，甚至定義自己需要的右鍵菜單的樣式！

注意：本教程適用Spread JS版本是V11及以上版本。

了解SpreadJS右鍵菜單

SpreadJS右鍵菜單，分布于以下幾個區域，對應了各個區域所支持的操作：

1. Sheet標簽頁區域（sheetTab）：
2. 角標區域（corner）：
3. 行頭區域（rowHeader）：
4. 列頭區域（colHeader）：
5. 數據編輯區域（viewport）：
6. 切片器區域（slicer）：
7. 角標區域（corner）：

   以上的所有右鍵菜單功能項，都是定義在一個數組對象menuData中，下列代碼展示了如何獲取這個數組：

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
   sheetCount : 1 });
   
   var menuData = spread.contextMenu.menuData;

   用console打印出這個對象的結構，如圖所示：

   

   上圖中展示出的數組元素，就是所有右鍵菜單的元素了。每個元素都是以json對象的方式被定義的，其中包括幾類元素

8. 不含子菜單，單擊即執行的菜單項（代表項是“復制”）：

   包含屬性：

   • command ：代表了點擊此菜單項后只需的命令操作
   • iconClass ：代表了此菜單項左側icon的樣式
   • name ：菜單項的名稱（不可重復）
   • text ：菜單項顯示的文字
   • workArea ：工作區域，“復制”操作的可用區域為viewport + colHeader + rowHeader + slicer + corner。
9. 含有子菜單，點擊子菜單項執行的菜單項（代表項是“排序”）： 這個子菜單是可以繼續擴展二級子菜單甚至多級子菜單的，只需要給子菜單繼續添加subMenu屬性即可。如圖：
10. 組菜單頭，表示一個組菜單的頭部（代表項是“粘貼選項”）： 組菜單頭依然不是可執行的項，但是它代表了一組菜單項的頭部，以type:“groupHeader”來定義，如圖：
11. 組菜單元素，表示組菜單的元素項（代表項是“全部粘貼”）： 組菜單元素是隸屬于組菜單頭元素的元素項，它們在menuData中是獨立的元素，但是它們包含group屬性，這個group屬性與組菜單頭元素的name相同，指定了其所屬的組。
12. 分隔符，表示右鍵菜單中的橫線（separator）： 只有一個屬性的元素，指定了它就是作為視覺分隔符而定義的，如圖：

購買SpreadJS正版授權，請點擊“”喲！