组件版设计器之默认折叠菜单栏

收藏

本帖最后由 Lynn.Dou 于 2023-8-28 10:10 编辑

背景：

在某些场景下，工具栏的展开会影响表单区域的显示，所以需要折叠工具栏。

熟悉Excel操作的小伙伴很容易了解到，点击工具栏右下角的向上三角符号，即可实现折叠。

有小伙伴问了，可以在初始化designer的时候就默认折叠工具栏吗？即通过代码去实现上述操作。

思路：

工具栏的折叠状态是由"isRibbonCollapse"这个字段控制的，我们可以通过getData方法获取到当前的折叠状态。

var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("gc-designer-container"));
designer.getData("isRibbonCollapse");

复制代码

如果想修改为折叠，那可以通过setData方法传参true。

复制代码

需要注意的是，这里的折叠并不是真正的“隐藏”。在折叠状态下，点击工具栏某个tab时会自动展开，这一设计也是与Excel一样的。

补充：

如果说想实现真正的“隐藏”，建议直接使用spreadJS就好，不需要引入deisgner组件。

当然也有小伙伴会问，如果我既不想显示工具栏，又想使用designer具有的一些功能（如右键菜单），应该怎么做？

可以考虑用css实现，即找到工具栏对应的dom，将其隐藏。

最后记得refresh刷新下designer，不然会出现白色空白区域。

document.getElementsByClassName("ribbon")[0].style.display='none';
var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("gc-designer-container"));
designer.refresh();

复制代码

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

0 个回复