【17】工具栏自定义按钮问题

收藏

本帖最后由鸳鸯配2024 于 2024-8-8 18:25 编辑

结果是这样的，它的内容不显示
img_v3_02di_07e4d3e8-ed12-426a-b4f8-2c20fbd3b36g.jpg753406371.png

let config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {};
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert('Welcome to new designer.');
}
}
}
config.ribbon[0].buttonGroups.unshift({
"label": "NewDesigner",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer-container"), config);

复制代码

没有显示的按钮，不知道哪里设置不对。

Wilson.Zhang · Wilson.Zhang

您好！在工具栏添加自定义按钮，需要定义的按钮可视内容包括按钮名称、按钮样式等，一般通过css设置按钮样式，可以在css样式中设置按钮图标。在您提供的代码中，您需要检查为Welcome按钮设置的样式iconClass是否存在，这个您可以自定义。参考下图，将iconClass样式替换为了粘贴按钮的图标样式，便可在Welcome按钮处看到图标。
1723169198329.png765642394.png

附件中的demo即如上所述的实现方式，供您参考！

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-9 10:13
您好！在工具栏添加自定义按钮，需要定义的按钮可视内容包括按钮名称、按钮样式等，一般通过css设置按钮样 ...

明白了。还想问下，如果把这个自定义按钮，改成图片上传的按钮，要怎么改啊？
想上传到指定的单元格里面去。

指定单元格里面内容，这块弄的差不多了。

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-8-9 11:32
明白了。还想问下，如果把这个自定义按钮，改成图片上传的按钮，要怎么改啊？
想上传到指定的单元格里面 ...

您是要自定义一个按钮用以上传图片到单元格吗？

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-9 11:55
您是要自定义一个按钮用以上传图片到单元格吗？

对对，就是这样的。找了些，没有找到可具体参考的。

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-8-9 11:58
对对，就是这样的。找了些，没有找到可具体参考的。

17.1.2版本新支持了单元格类型文件选择器，可以支持上传图片类型，您评估下这个新特性是否能够满足您的需求。

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-9 12:13
17.1.2版本新支持了单元格类型文件选择器，可以支持上传图片类型，您评估下这个新特性是否能够满足您的需 ...

这块要怎么改啊

let config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {};
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert('Welcome to new designer.');
}
}
}
config.ribbon[0].buttonGroups.unshift({
"label": "NewDesigner",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer-container"), config);

复制代码

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-8-9 13:39
这块要怎么改啊

您是说把文件选择器单元格类型加在您的代码中吗？也就是说还是要通过工具栏自定义的图片上传按钮触发吗？

鸳鸯配2024 · 鸳鸯配2024

Wilson.Zhang 发表于 2024-8-9 14:41
您是说把文件选择器单元格类型加在您的代码中吗？也就是说还是要通过工具栏自定义的图片上传按钮触发吗？

不是，就是工具栏添加自定义按钮，按钮内容就是上传图片至指定单元格。

上传完图片后，到指定的单元格。

Wilson.Zhang · Wilson.Zhang

鸳鸯配2024 发表于 2024-8-9 14:44
不是，就是工具栏添加自定义按钮，按钮内容就是上传图片至指定单元格。

上传完图片后，到指定的单元格 ...

结合前面讨论的信息，您当前已经完成了将图片传到指定单元格的代码开发，也给您提供了新建工具栏按钮的方法，在联动这两块代码逻辑时，您现在需要解决的技术实现问题是什么呢？

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

[已处理] 【17】工具栏自定义按钮问题

17 个回复