在线表格编辑器修改“文件”菜单（一）

收藏

本帖最后由 Ellia.Duan 于 2024-6-27 10:03 编辑

目前收到很多客户关于“文件”菜单自定制的需求：
1、希望隐藏“文件”菜单中，左侧的菜单树，只保留右侧的打印预览。
2、希望删除“新建”菜单。
3、希望将“导入”设置为默认选中
4、希望增加密码Label，而不是简单的一个input框
等等。

我们之前有一篇技术博客《自定制组件化编辑器——删除文件菜单项》用来描述实现上述需求的一些代码以及思路。
但是有很多客户发现，升级版本后，之前写的代码不生效了。这是怎么回事呢？
因为我们升级版本后，会有一些结点的增加，导致原来通过遍历结点的方式找不到正确的结点，那么我们该怎么做呢？
下面以添加“密码”Label为例，介绍如何遍历结点，如何找到正确的结点：
1、获取文件template

var fileMenuPanelTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);

复制代码

2、遍历结点
我们将上述代码中fileMenuPanelTemplate 进行打印，在控制台中输出结果后，进行复制粘贴至新文本中，此时全局搜索“密码”

如上图所示，我们找到密码后，找到其父结点，有一个id是“c_computerContent”
我们全局搜索“c_computerContent”
结果有两个，分别是

观察上面两个图，区别在于“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[i])
}
} 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如下：

增加密码提示.html (4.71 KB, 下载次数: 44)

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

在线表格编辑器修改“文件”菜单（一）

0 个回复

SpreadJS 认证

SpreadJS 高级认证