在线表格编辑器修改“文件”菜单（一）
本帖最后由 Ellia.Duan 于 2024-6-27 10:03 编辑目前收到很多客户关于“文件”菜单自定制的需求：
1、希望隐藏“文件”菜单中，左侧的菜单树，只保留右侧的打印预览。
2、希望删除“新建”菜单。
3、希望将“导入”设置为默认选中
4、希望增加密码Label，而不是简单的一个input框
等等。
我们之前有一篇技术博客《自定制组件化编辑器——删除文件菜单项》用来描述实现上述需求的一些代码以及思路。
但是有很多客户发现，升级版本后，之前写的代码不生效了。这是怎么回事呢？
因为我们升级版本后，会有一些结点的增加，导致原来通过遍历结点的方式找不到正确的结点，那么我们该怎么做呢？
下面以添加“密码”Label为例，介绍如何遍历结点，如何找到正确的结点：
1、获取文件templatevar fileMenuPanelTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);2、遍历结点
我们将上述代码中fileMenuPanelTemplate 进行打印，在控制台中输出结果后，进行复制粘贴至新文本中，此时全局搜索“密码”
https://dwucofzmrd5.feishu.cn/space/api/box/stream/download/asynccode/?code=MzdhNWJmZjU4MTVkYWFjMDJlMmYzODZiYzRkYWVlMTBfVHh6UWUzRnlFSEJhcnFvelI1Sm1KaEx3SzE0ajhNOTFfVG9rZW46UFNsOWJBcVJub01kcXp4Y1ZuNWNvb3dibkxoXzE3MTk0NTAxODM6MTcxOTQ1Mzc4M19WNA
如上图所示，我们找到密码后，找到其父结点，有一个id是“c_computerContent”
我们全局搜索“c_computerContent”
结果有两个，分别是
https://dwucofzmrd5.feishu.cn/space/api/box/stream/download/asynccode/?code=YzNhODVkODBjMjFmMDY1YjFlOTAxNjkxY2RiNmFiZTNfSW5CM2RWUTNxTVZkOTJHdTYwdTVFdXlhSHpkbzBMMHVfVG9rZW46UXJZTGJHYlR0b1dRczZ4UXU0WmN0VXBObjVnXzE3MTk0NTAxODM6MTcxOTQ1Mzc4M19WNA
https://dwucofzmrd5.feishu.cn/space/api/box/stream/download/asynccode/?code=NWYxNWQxNTQyMDM5YzNkNGQ1MDZkNjdmMjZjZWJhZDJfSlY3RnNTbk4yMGdUVHkxUE1FWlZwUEFIcnNaYjZucXFfVG9rZW46TDV2dWIyZWoyb1JJaXR4bmZKcWNKVlFMbjNjXzE3MTk0NTAxODM6MTcxOTQ1Mzc4M19WNA
观察上面两个图，区别在于“visibleWhen” ，在17版本中，我们点击“导出” ，选择“excel ” 触发的是“activeCategory_export=Excel”。
获取到上面的信息后，我们进行递归遍历
let resultNode;
findNode(fileMenuPanelTemplate.content)
function findNode(node) {
if (node instanceof <em>Array</em>) {
for (let i = 0; i < node.length; i++) {
findNode(node)
}
} else if (node.children) {
if (node.id == "c_computerContent" && node.visibleWhen == 'activeCategory_export=Excel') {
resultNode = node
} else {
findNode(node.children)
}
}
}
观察上述代码，我们对fileMenuPanelTemplate.content进行了递归遍历，如果当前结点是数组，我们循环。如果当前结点有children，则对children进行遍历。
在此过程中，判断出当前结点的id是“c_computerContent”和visibleWhen是'activeCategory_export=Excel'。我们拿到这个结点后，进行替换。
三、替换结点
我们在来看下密码input框这个结点
{
"type": "TextEditor",
"margin": "5px 0 0 50px",
"style": "width:200px",
"isPassword": true,
"bindingPath": "exportXlsxOptions.password",
"placeholder": "密码",
"maxLength": 255
},
我们对此结点修改下，增加一个label结点
let columnNode = {
"type": "ColumnSet",
"children": [
{
"type": "Column",
"children": [
{
"type": "TextBlock",
"text": "密码:",
"margin": '5px 0 0 50px'
}
],
"width": "100px"
},
{
"type": "Column",
"children": [
{
bindingPath: "exportXlsxOptions.password",
isPassword: true,
maxLength: 255,
placeholder: "密码",
type: "TextEditor",
}
],
"width": "220px"
}
]
}
上述代码有两个结点，左结点是TextBlock，右结点是TextEditor。进行了样式调整。
我们将当前结点准备好之后，进行替换
resultNode.children.splice(13, 1, columnNode)
四、注册结点
最后将FileMenuPanelTemplate重新注册
GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuPanelTemplate);
结果如下：
通过上述代码，就简单实现了一个结点的替换。
demo如下：
在下篇文章中，我们将介绍如何实现默认选中“导入”。
页:
[1]