Designer动态显示新增菜单项
我们结合一个具体的案例来介绍下本篇教程
背景：
客户希望粉色区域行头菜单可以显示新增项，其余区域不会显示。
思路：
对于新增菜单项，需要先自定义命令以及菜单结构。
let commandManager = spread.commandManager();
let specialAddRow = {
canUndo: true,
execute: function (spread, options, isUndo) {
let Commands = GC.Spread.Sheets.Commands;
if (isUndo) {
Commands.undoTransaction(spread, options);
return true;
} else {
Commands.startTransaction(spread, options)
alert("自定义添加行");
Commands.endTransaction(spread, options);
return true;
}
}
}
commandManager.register("customeAddRow", specialAddRow);let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
let customeAddRow = {
"text": "自定义添加行",
commandName: "customeAddRow"
};
// 追加自定义右键菜单
config.contextMenu.push("customeAddRow");
config.commandMap = {
customeAddRow
};
designer.setConfig(config);控制自定义右键菜单显示条件：
在customeAddRow中添加visibleContext属性，其中insertRowActive为自定义条件
let insertRowActive = "insertRowActive";
let customeAddRow = {
"text": "自定义添加行",
commandName: "customeAddRow",
// ClickRowHeader && !AllowInsertCopiedCutCells为行头选中条件，insertRowActive为自定义条件
visibleContext: `ClickRowHeader && !AllowInsertCopiedCutCells && ${insertRowActive}`,
};
监听SelectionChanged事件，动态修改insertRowActive值
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
var row = info.sheet.getActiveRowIndex();
if (info.sheet.getStyle(row, -1)) {
designer.setData(insertRowActive, true);
} else {
designer.setData(insertRowActive, false);
}
designer.refresh();
})来看看测试结果：
完整代码请参考附件demo。
页:
[1]