深入解析如何自定义SpreadJS右键菜单(一)

时间:2024-04-01 18:33:49

下载SpreadJS最新试用版

Spread JS本身支持丰富的右键菜单功能,包括单元格区域、行头区域、列头区域、角标区、表单标签区域等都可以用右键呼出对应的右键菜单。Spread JS还提供了自定义这些右键菜单的方法,让用户可以方便、*地添加、删除、重新排序右键菜单,以及更改右键菜单原本的功能,甚至定义自己需要的右键菜单的样式!

注意:本教程适用Spread JS版本是V11及以上版本。

了解SpreadJS右键菜单

SpreadJS右键菜单,分布于以下几个区域,对应了各个区域所支持的操作:

  1. Sheet标签页区域(sheetTab): 深入解析如何自定义SpreadJS右键菜单(一)
  2. 角标区域(corner): 深入解析如何自定义SpreadJS右键菜单(一)
  3. 行头区域(rowHeader): 深入解析如何自定义SpreadJS右键菜单(一)
  4. 列头区域(colHeader): 深入解析如何自定义SpreadJS右键菜单(一)
  5. 数据编辑区域(viewport): 深入解析如何自定义SpreadJS右键菜单(一)
  6. 切片器区域(slicer): 深入解析如何自定义SpreadJS右键菜单(一)
  7. 角标区域(corner):

    以上的所有右键菜单功能项,都是定义在一个数组对象menuData中,下列代码展示了如何获取这个数组:

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

    用console打印出这个对象的结构,如图所示:

    深入解析如何自定义SpreadJS右键菜单(一)

    上图中展示出的数组元素,就是所有右键菜单的元素了。每个元素都是以json对象的方式被定义的,其中包括几类元素

  8. 不含子菜单,单击即执行的菜单项(代表项是“复制”): 深入解析如何自定义SpreadJS右键菜单(一)

    包含属性:

    • command :代表了点击此菜单项后只需的命令操作
    • iconClass :代表了此菜单项左侧icon的样式
    • name :菜单项的名称(不可重复)
    • text :菜单项显示的文字
    • workArea :工作区域,“复制”操作的可用区域为viewport + colHeader + rowHeader + slicer + corner。
  9. 含有子菜单,点击子菜单项执行的菜单项(代表项是“排序”): 深入解析如何自定义SpreadJS右键菜单(一) 这个子菜单是可以继续扩展二级子菜单甚至多级子菜单的,只需要给子菜单继续添加subMenu属性即可。如图: 深入解析如何自定义SpreadJS右键菜单(一)
  10. 组菜单头,表示一个组菜单的头部(代表项是“粘贴选项”): 深入解析如何自定义SpreadJS右键菜单(一) 组菜单头依然不是可执行的项,但是它代表了一组菜单项的头部,以type:“groupHeader”来定义,如图: 深入解析如何自定义SpreadJS右键菜单(一)
  11. 组菜单元素,表示组菜单的元素项(代表项是“全部粘贴”): 深入解析如何自定义SpreadJS右键菜单(一) 组菜单元素是隶属于组菜单头元素的元素项,它们在menuData中是独立的元素,但是它们包含group属性,这个group属性与组菜单头元素的name相同,指定了其所属的组。 深入解析如何自定义SpreadJS右键菜单(一)
  12. 分隔符,表示右键菜单中的横线(separator): 深入解析如何自定义SpreadJS右键菜单(一) 只有一个属性的元素,指定了它就是作为视觉分隔符而定义的,如图: 深入解析如何自定义SpreadJS右键菜单(一)