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

收藏

本帖最后由 Ellia.Duan 于 2024-7-2 13:53 编辑

接上文介绍的内容，本文将介绍如何设置“打印”为默认选中，且只显示“打印”菜单。
我们先上最后的效果图，
image.png291065978.png

那我们开始吧。
第一步，获取文件template

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

复制代码

第二步，遍历node
如同之前介绍的系列文章，我们将上述代码中fileMenuPanelTemplate 进行打印，在控制台中输出结果后，进行复制粘贴至新文本中，此时全局搜索“打印”
image.png571044311.png

如上图所示，我们找到了“打印”的结点，以及找到了className为“gc-file-menu-category”的父节点。所以我们在遍历node结点时，可以查找className为“gc-file-menu-category”的结点，并对其遍历，删除子节点，仅保留第一个结点“后退”按钮以及最后一个按钮“打印”，
代码如下：

findNode(fileMenuPanelTemplate.content)
function findNode(node) {
if (node instanceof Array) {
for (let i = 0; i < node.length; i++) {
findNode(node[i])
}
} else if (node.children) {
if (node.className == "gc-file-menu-category") { //左侧节点
node.children.splice(1, node.children.length - 2) //保留后退按钮和最后一个打印按钮
}
findNode(node.children)
}
}

复制代码

上述代码便实现了左侧菜单只保留“后退”按钮和“打印”按钮的功能，我们重新注册一下，看下实际效果
注册代码：

GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuPanelTemplate);

复制代码

效果如下：

我们观察上图，左侧菜单实现了我们想要的效果，然后右侧显示的是默认的“新建”工作簿功能，不是我们想要的打印预览，此时该怎么办呢？
别着急，我们还是打开文本，查找“打印”，我们总共查找到两个结果，第一个是左侧菜单的“打印” ，第二个是右侧面板的“打印”，如下图所示：
image.png342547911.png

我们同样，找到这个结点的父节点，
image.png414362792.png

如上图所示，我们找到了className为“category-content-container”的父节点，我们将其子节点进行删除，仅保留“打印”预览功能。
代码如下：

findNode(fileMenuPanelTemplate.content)
function findNode(node) {
if (node instanceof Array) {
for (let i = 0; i < node.length; i++) {
findNode(node[i])
}
} else if (node.children) {
if (node.className == "gc-file-menu-category") { //左侧节点
node.children.splice(1, node.children.length - 2) //保留后退按钮和最后一个打印按钮
}
else if (node.className == 'category-content-container') { //右侧节点
for (let i = 0; i < node.children.length; i++) {
let leaveNode = node.children[i]
if (leaveNode.visibleWhen !== "activeCategory_main=Print") {
node.children.splice(i, 1)
}
}
}
findNode(node.children)
}
}

复制代码

在上述代码中，我们查找了className为“category-content-container”的父节点，并遍历其children ,如果children的visibleWhen不等于"activeCategory_main=Print"则进行删除。
我们在当前代码基础上看下实际效果：
image.png267923278.png

此时点击下“打印”，发现有内容
image.png222846373.png

但是这个也不是我们想要的想过，我们想要，点击“文件” ，默认选中“打印”，此时又该怎么办呢？
我们需要获取“FileMenuPanel”命令，重写其getState方法
代码如下：

var fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel);
var oldStatusFn = fileMenuPanelCommand.getState;
fileMenuPanelCommand.getState = function () {
var result = oldStatusFn.apply(this, arguments);
result.activeCategory_main = "Print";
result.printSetting.activeCategoryIsPrint = true;
return result;
}
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
fileMenuPanel: fileMenuPanelCommand
}

复制代码

我们重新setConfig后，再来看看效果，果然实现了。

image.png887489013.png

最后的demo

只显示打印预览.html (5.06 KB, 下载次数: 1)

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

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证