SpreadJS在线表格编辑器自定义功能 - 删除默认配置项（DefaultConfig）

收藏

本帖最后由 dexteryao 于 2021-2-3 14:00 编辑

在我们提供的组件版设计器中，工具栏提供了相当丰富的按钮和菜单栏。但是，可能有许多小伙伴可能用不了那么多的功能，这时候我们可以将不需要的按钮或者菜单栏去除。那就开始看下如何实现吧。

首先来讲讲如何删除某个按钮。例如，我们想删除左上角的撤销重做按钮
image.png264569701.png

我们需要获取到设计器的DefaultConfig

var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))

复制代码

我们可以看到designerConfig.ribbon[0].buttonGroups是一个数组
image.png895434875.png

这时候我们可以用Slice将这这项删除

designerConfig.ribbon[0].buttonGroups.splice(0,1);

复制代码

最后我们将designerConfig传进designer

new GC.Spread.Sheets.Designer.Designer(
document.getElementById('gc-designer-container'),
designerConfig,
);

复制代码

这时候左上角的撤销重做已经消失了
image.png360343016.png

那么如何把整个菜单栏去掉呢？我们来看下如何去掉”设置“菜单栏。同理，还是需要拿到设计器的DefaultConfig

var designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))

复制代码

我们再来看下designerConfig.ribbon里面有什么。同样，也一个数组，"设置"菜单栏的下标为5.
image.png28338927.png

designerConfig.ribbon.splice(5,1)

复制代码

与上面操作一致，我们将这个config传进去

new GC.Spread.Sheets.Designer.Designer(
document.getElementById('gc-designer-container'),
designerConfig,
);

复制代码

可以看到”设置“已经消失，大功告成。

ELN · ELN

你好，我将菜单栏全部删除后会报错gc.spread.sheets.designer.all.15.0.2.min.js:1

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')，请问如何解决？

Derrick.Jiao · Derrick.Jiao

ELN 发表于 2022-5-12 09:03
你好，我将菜单栏全部删除后会报错gc.spread.sheets.designer.all.15.0.2.min.js:1

Unc ...

确实会出现报错，我这边来重新调研一下，建议开一个新帖，方便后续的跟踪处理。

a杰 · a杰

Derrick.Jiao 发表于 2022-5-12 10:15
确实会出现报错，我这边来重新调研一下，建议开一个新帖，方便后续的跟踪处理。

有结果吗？我试了也报错

Derrick.Jiao · Derrick.Jiao

a杰发表于 2022-6-28 14:31
有结果吗？我试了也报错

这是一个产品行为，设计器的核心就是上方的ribbon，因此不支持将上方的ribbon全部删除，如果不想要用ribbon，直接使用SpreadJS即可。

Hyao · Hyao

Derrick.Jiao 发表于 2022-6-28 16:02
这是一个产品行为，设计器的核心就是上方的ribbon，因此不支持将上方的ribbon全部删除，如果不想要用ribb ...

这个有办法删除或者隐藏吗

Lynn.Dou · Lynn.Dou

Hyao 发表于 2022-10-9 10:48
这个有办法删除或者隐藏吗

只引入SpreadJS就不会出现上方的红框区域了。
如果是想在设计器的基础上隐藏红框区域，可以参考以下代码：

document.getElementsByClassName("top-panels")[0].style.display='none';

复制代码

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

SpreadJS在线表格编辑器自定义功能 - 删除默认配置项（DefaultConfig）

6 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证