超国产91,国产精品高清视,国产香蕉在线视频

深入解析如何自定義SpreadJS右鍵菜單（一）

翻譯|使用教程|編輯：王香|2019-01-28 09:48:52.000|閱讀 859 次

概述：Spread JS本身支持豐富的右鍵菜單功能，包括單元格區(qū)域、行頭區(qū)域、列頭區(qū)域、角標區(qū)、表單標簽區(qū)域等都可以用右鍵呼出對應(yīng)的右鍵菜單。

相關(guān)鏈接：

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

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

了解SpreadJS右鍵菜單

SpreadJS右鍵菜單，分布于以下幾個區(qū)域，對應(yīng)了各個區(qū)域所支持的操作：

Sheet標簽頁區(qū)域（sheetTab）：
角標區(qū)域（corner）：
行頭區(qū)域（rowHeader）：
列頭區(qū)域（colHeader）：
數(shù)據(jù)編輯區(qū)域（viewport）：
切片器區(qū)域（slicer）：
角標區(qū)域（corner）：
以上的所有右鍵菜單功能項，都是定義在一個數(shù)組對象menuData中，下列代碼展示了如何獲取這個數(shù)組：
```
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount : 1 });

var menuData = 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í)行的菜單項（代表項是“排序”）：這個子菜單是可以繼續(xù)擴展二級子菜單甚至多級子菜單的，只需要給子菜單繼續(xù)添加subMenu屬性即可。如圖：
組菜單頭，表示一個組菜單的頭部（代表項是“粘貼選項”）：組菜單頭依然不是可執(zhí)行的項，但是它代表了一組菜單項的頭部，以type:“groupHeader”來定義，如圖：
組菜單元素，表示組菜單的元素項（代表項是“全部粘貼”）：組菜單元素是隸屬于組菜單頭元素的元素項，它們在menuData中是獨立的元素，但是它們包含group屬性，這個group屬性與組菜單頭元素的name相同，指定了其所屬的組。
分隔符，表示右鍵菜單中的橫線（separator）：只有一個屬性的元素，指定了它就是作為視覺分隔符而定義的，如圖：