designer自定义右键菜单设置显示区域
本帖最后由 Winny 于 2023-8-22 10:58 编辑在web端开发时，需要实现根据客户选中的位置区域展示不同的右键菜单，也就是控制右键菜单的显示与隐藏。本文会介绍如何查看、修改右键菜单的显示位置。
designer右键菜单对应的命令可以在默认配置下的contextMenuna拿到。如下所示：
以剪贴（contextMenuCut）为例，首先我们来查看其默认显示位置：
上图中，红框内“visibleContext”代表的即为右键菜单的显示条件，后边会对每个条件代表的含义再做具体的解释。
需求一： 修改右键菜单显示位置
修改右键菜单显示位置十分简单，仅需去掉或新增visibleContext中的内容，之后再将修改后的命令重新注册进designer即可。
以表单保护右键菜单为例，将其从表单名称标签区域调整至表格区域，详细代码如下：
/**
* 需求：调整右键菜单显示位置
* demo以表单保护为例，将表单保护右键菜单从表单名称区域调整到表格区域
* 表单保护原本的visibleContext为TabStripSelected && !IsProtected
* 修改为ClickViewport && !IsProtected
*/
let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
let ptotectSheetComd = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ProtectSheet)
ptotectSheetComd.visibleContext = "ClickViewport && !IsProtected"
config.commandMap = {
:ptotectSheetComd
}
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container",config)点击这里可以跳转至详细的demo展示。
需求二：已有visibleContext列表
目前没有一些官方的文档对visibleContext中的内容做详细说明，但其实掌握了文章开头描述的查看右键菜单命令的方式，也可以获取到相关的信息，下边对目前已有的部分显示属性做详细说明，不在表中的可以按照文章开始的方法在官网测试地址找到对应区域其他右键菜单，查看具体属性。
属性含义
ClickViewport选中表格区域
ClickCorner选中表角
ClickColHeader选中列头
ClickRowHeader选中行头
PivotTableSelected透视表选中
TableClicked选中表格
CanDeleteTableRows允许删除表格行
ShapeSelected选中形状
WithShapeHyperlink包含形状链接
SupportHyperLinkShape支持形状超链接
InPivotHeaderArea光标处于透视表头区域
InPivotContentArea光标处于透视表表体内
SlicerSelected切片器选中
PivotTableSelected选中透视表
pivotTablePanel_Visible透视表配置面板可见
PivotContextMenuCornerShouldShow透视表右键菜单显示
TabStripSelected选中表单名称标签
IsProtected表单处于保护状态
TableSheetClickViewport选中集算表区域
TableSheetClickCorner选中集算表表角
TableSheetClickColHeader选中集算表列头
TableSheetClickRowHeader选中集算表行头
页:
[1]