关于SHEETTAB区域的右键菜单问题

收藏

版本：spread.js 11.1
最近用户反映SHEETTAB区域右键的《工作表标签颜色》功能点击进去子菜单里什么都没有
image.png470859984.png

查看contextMenu.js里的配置，运行时如下：
image.png778875427.png

配置的值具体如下：

contextMenuRes.sheetTabColor
"工作表标签颜色"
MENUITEM_NAME_PREFIX + SHOW_TAB_COLOR
"designer.showTabColor"
MENUITEM_NAME_PREFIX + TAB_COLOR
"designer.tabColor"
SHEETTAB
"sheetTab"

请问这个问题应该怎么解决？

KevinChen · KevinChen

您好，这个问题是由于运行后把右键菜单中“工作表标签颜色”的subMenu数组中0位的元素的name属性修改导致的。

您把在线表格编辑器加载完成后，在Console中输入以下代码，查看一下menuData的内容，给我截个图，类似下图这样：
代码：

var spread = GC.Spread.Sheets.findControl("ss");
var menuData = spread.contextMenu.menuData;
menuData;

复制代码

gaoyuran · gaoyuran

感谢您的回复，我上面实际上已经发过了键值对的值，现在再按照您的要求发一下对应截图，如下：
image.png359587706.png

KevinChen · KevinChen

您好，您上边发的是创建右键菜单时debug的内容，而右键菜单是有可能后期被修改的，

所以又麻烦您把问题重现时的右键菜单打印了一次。

不过看到您的截图，问题应该不是后期修改了menuData导致的，

我想了解一下您针对Designer做了哪些定制，

有没有在程序中添加自定义命令？

另外，您spreadjs版本号具体是多少？ v11.1.0 还是？

gaoyuran · gaoyuran

有添加自定义右键菜单选项，但是没有改过sheettab中的右键菜单，代码截图如下：
image.png432097472.png

下面截图是command内容了
image.png272424926.png

gaoyuran · gaoyuran

忘了说具体版本号，版本号是v11.1.0

KevinChen · KevinChen

gaoyuran 发表于 2019-1-9 15:34
忘了说具体版本号，版本号是v11.1.0

您好，目前可以确定，是由于代码中重写了spread.contextMenu.menuView导致的问题。

Designer用的不是普通的MenuView，而是DesignerMenuView，Designer已经对menuView

进行了重写，因此再重写这个类一定会有问题。

解决方法很简单，您在Designer目录下contextMenu/contextMenu.js中找到DesignerMenuView，

加一句声明把DesignerMenuView暴漏出来，代码如下：

function DesignerMenuView() {
}
DesignerMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
DesignerMenuView.prototype.createMenuItemElement = function (menuItemData) {
var self = this;
var menuItemView;
if (menuItemData.name === MENUITEM_NAME_PREFIX + TAB_COLOR) {
var supMenuItemContainer = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
supMenuItemContainer.empty();
$(supMenuItemContainer[0]).colorpicker(
{
valueChanged: function (e, value) {
if (!value.isSetColorDirectly) {
$(supMenuItemContainer[0]).data("selectedColor", value);
} else {
designer.actions.doAction("setSheetTabColor", designer.wrapper.spread, value.color);
}
}
}
);
$(supMenuItemContainer[0]).colorpicker("option", "themeColors", designer.wrapper.getThemeColors());
supMenuItemContainer.css({ "margin": "0", "padding": "0" });
supMenuItemContainer.css("background", "white");
return supMenuItemContainer;
} else if (menuItemData.name === MENUITEM_NAME_PREFIX + PROTECT_SHEET) {
var activeSheet = designer.wrapper.spread.getActiveSheet();
if (activeSheet.options.isProtected) {
menuItemData.text = contextMenuRes.unprotectsheet;
} else {
menuItemData.text = contextMenuRes.protectsheet;
}
menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
return menuItemView;
} else {
menuItemView = GC.Spread.Sheets.ContextMenu.MenuView.prototype.createMenuItemElement.call(self, menuItemData);
return menuItemView;
}
};
DesignerMenuView.prototype.getCommandOptions = function (menuItemData, host, event) {
if (menuItemData.name === MENUITEM_NAME_PREFIX + TAB_COLOR) {
return {
value: $(host).children().data("selectedColor")
};
} else if (menuItemData.name === MENUITEM_NAME_PREFIX + FORMAT_CHART) {
return menuItemData.options;
}
};
spread.contextMenu.menuView = new DesignerMenuView();
// 在此加一句声明，把DesignerMenuView暴露出来
GC.Spread.Sheets.Designer.DesignerMenuView = DesignerMenuView;
designer.spreadActions.initDesignerCommands(spread.commandManager());
}

复制代码

然后再针对DesignerMenuView进行重写，即可解决这个问题。代码示例如下：

var spread = GC.Spread.Sheets.findControl("ss");
function CustomMenuView() { }
CustomMenuView.prototype = new GC.Spread.Sheets.Designer.DesignerMenuView();
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
var self = this;
console.log(menuItemData);
var menuItemView = GC.Spread.Sheets.Designer.DesignerMenuView.prototype.
createMenuItemElement.apply(self, arguments);
return menuItemView;
};
spread.contextMenu.menuView = new CustomMenuView();

复制代码

gaoyuran · gaoyuran

本帖最后由 gaoyuran 于 2019-1-9 17:15 编辑

感谢，现在该按钮可以显示内容了，但是又有新的问题，选择某颜色后，sheettab并没有改变颜色。。。没有任何变化，并且有报错Uncaught TypeError: GC.Spread.Sheets.contextMenu.DesignerMenuView is not a constructor
image.png503700866.png

代码修改处：
contextMenu.js:
image.png792803344.png

自定义文件：

gaoyuran · gaoyuran

请问像这种情况我应该怎么做，是需要把自定义按钮的部分写到contextMenu.js中吗？
目前在contextMenu.js中，initContextMenu函数的执行是在所有任务执行完成之后执行，导致我的自定义文件的代码会在GC.Spread.Sheets.Designer.DesignerMenuView = DesignerMenuView 这一句之前执行，此时DesignerMenuView还没有被暴露出来，在尽可能少的修改源码的基础上怎么做比较好？

KevinChen · KevinChen

gaoyuran 发表于 2019-1-9 17:49
请问像这种情况我应该怎么做，是需要把自定义按钮的部分写到contextMenu.js中吗？
目前在contextMenu.js中 ...

您好，这种情况我这边还需要调研一下，不过我看到您的部分代码，

您重写menuView仅仅是替换了右键菜单项执行的命令，也没有其它的逻辑，

也许还有一种方式也可以实现您的需求，比如您在Spread加载完成后可以直接遍历

spread.contextMenu.menuData

来做一个一次性替换，这样不需要每次点击右键菜单都替换一次，性能更好一些，

也不会出这样的问题。

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

[已处理] 关于SHEETTAB区域的右键菜单问题

11 个回复

微信认证勋章

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证