designer自定义右键菜单设置显示区域

收藏

本帖最后由 Winny 于 2023-8-22 10:58 编辑

在web端开发时，需要实现根据客户选中的位置区域展示不同的右键菜单，也就是控制右键菜单的显示与隐藏。本文会介绍如何查看、修改右键菜单的显示位置。
designer右键菜单对应的命令可以在默认配置下的contextMenuna拿到。如下所示：
image.png343182372.png

以剪贴（contextMenuCut）为例，首先我们来查看其默认显示位置：

image.png481736449.png

上图中，红框内“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 = {
[GC.Spread.Sheets.Designer.CommandNames.ProtectSheet]: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	选中集算表行头

		自动登录	找回密码
密码			立即注册

designer自定义右键菜单设置显示区域

0 个回复