显示零值单元格功能详解

收藏

在某些业务场景下，比如财务报表、数据分析表中存在大量0值时，显示为空可使数据更简洁，避免干扰阅读。或者打印或展示报表时，空白单元格比0值更显整洁，符合商业文档的视觉规范。
一、对于普通sheet
SpreadJS提供了“是否显示为零值”的能力，具体表现为：
1、在工具栏 ——> 工作表设置 ——> 常规中，取消勾选“显示零值单元格”，则零值会显示为空
image.png580712279.png

2、在工作表中，提供了showZeros属性用于控制零值是否显示为空值。

sheet.options.showZeros = false

复制代码

需要注意的是，此功能只是改变了单元格的显示值，单元格实际值仍为0，所以公式计算不受影响。
image.png855494079.png

二、对于reportSheet
reportSheet是SpreadJS提供的专用于报表业务的插件，它引入了一种简单而灵活的创新设计，使用户能够轻松地设计自己的报表。
通过简单的拖拽行为，用户可以快速的在设计页面创造出报表模板，点击预览按钮即可预览完整报表。在预览页面，“零值显示为空值”的需求也相应产生。
reportWorksheet也提供了showZeros属性，但是由于预览页面是在点击预览按钮后实时渲染的，所以需要获取最新的reportWorksheet 才能应用showZeros属性。

基于此背景，我们可以重写reportSheetDataEntryPreview命令来实现相关需求，示例代码如下：

let designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
// 获取 reportSheetDataEntryPreview 命令
let command = GC.Spread.Sheets.Designer.getCommand("reportSheetDataEntryPreview");
// // 保存原始的 execute 方法
let oldExecute = command.execute;
// 重写 execute 方法
command.execute = function (context) {
console.log("开始渲染"); // 在渲染开始前执行自定义逻辑
//console.log(context);
oldExecute.apply(this, arguments); // 调用原始的 execute 方法
let spread = context.getWorkbook();
let reportWorksheet = spread.getActiveSheetTab().reportWorksheet;
reportWorksheet.options.showZeros = false;
};
// 将修改后的指令重新注册到 designerConfig 中
designerConfig.commandMap = {
reportSheetDataEntryPreview: command,
};
designer.setConfig(designerConfig);

复制代码

效果图：

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

显示零值单元格功能详解

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人