组件版设计器之默认折叠菜单栏
本帖最后由 Lynn.Dou 于 2023-8-28 10:10 编辑背景：在某些场景下，工具栏的展开会影响表单区域的显示，所以需要折叠工具栏。熟悉Excel操作的小伙伴很容易了解到，点击工具栏右下角的向上三角符号，即可实现折叠。https://gccndocumentsitestorage.blob.core.chinacloudapi.cn/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.d5a0c7.png
https://gccndocumentsitestorage.blob.core.chinacloudapi.cn/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.734093.png
有小伙伴问了，可以在初始化designer的时候就默认折叠工具栏吗？即通过代码去实现上述操作。
思路：工具栏的折叠状态是由"isRibbonCollapse"这个字段控制的，我们可以通过getData方法获取到当前的折叠状态。
var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("gc-designer-container"));
designer.getData("isRibbonCollapse");
https://gccndocumentsitestorage.blob.core.chinacloudapi.cn/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.a48051.png
如果想修改为折叠，那可以通过setData方法传参true。designer.setData("isRibbonCollapse",true);
https://gccndocumentsitestorage.blob.core.chinacloudapi.cn/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.b89c80.png
需要注意的是，这里的折叠并不是真正的“隐藏”。在折叠状态下，点击工具栏某个tab时会自动展开，这一设计也是与Excel一样的。
补充：如果说想实现真正的“隐藏”，建议直接使用spreadJS就好，不需要引入deisgner组件。当然也有小伙伴会问，如果我既不想显示工具栏，又想使用designer具有的一些功能（如右键菜单），应该怎么做？可以考虑用css实现，即找到工具栏对应的dom，将其隐藏。最后记得refresh刷新下designer，不然会出现白色空白区域。document.getElementsByClassName("ribbon").style.display='none';
var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("gc-designer-container"));
designer.refresh();
页:
[1]