永利最大(官方)网站

下载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正版授权，请点击“”哟！