如何实现Excel中多级数据联动

news/2024/12/2 17:31:22/

摘要:本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言

在类Excel表格应用中,常用的需求场景是根据单元格之间的数据联动,例如选择某个省份之后,其它单元格下拉项自动扩展为该省份下的市区,本文会从代码及UI层面讲解如何实现数据之间的多级联动。

UI实现多级数据联动

Step1:设置数据;

按照如下形式设置数据,其中第一行为省份信息,剩余行中的内容为省份对应的市区信息

Step2:添加名称管理器
按照如下操作,分别创建名称管理器,其中,名称管理器名称为省份,引用区域为对应的省份区域。

Step3:添加一级数据验证

在该场景中,一级数据验证是省份信息,采用序列验证的形式来完成。

Step4: 添加二级数据验证

在该场景中,二级数据验证是指切换省份之后,代表地区的单元格下拉项随之更新,这里采用序列公式验证的形式来实现,对应的序列验证公式indirect()函数,详细操作如下:

这里需要注意的是,indirect函数中引用单元格需要根据需求设置好相对引用还是绝对引用。做好单个单元格的级联验证之后,如果想扩展到多行只需要利用spreadjs拖拽填充的功能即可,上图最后也给出了对应的操作。

代码实现级联数据

代码实现整体与UI操作相吻合,只需要将对应的UI行为翻译为代码实现即可。详细代码如下:

Step1: 设置数据

sheet.setArray(0,0,[["陕西省","江苏省"],["西安市","南京"],["宝鸡市","常州"],["汉中市","无锡"],["渭南市","苏州"],["延安市","泰州"],["商洛市","镇江"],["铜川市","宿迁"]])

Step2:设置名称管理器

spread.addCustomName("陕西省","=Sheet1!\$A\$2:\$A\$8",0,0)spread.addCustomName("江苏省","=Sheet1!\$B\$2:\$B\$8",0,0)

这里spread代表的是整个文件,名称管理器分为文件级和工作表级,这里用的是整个文件上的。

Step3: 设置一级数据验证

let dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=Sheet2!\$A\$1:\$B\$1");sheet.setDataValidator(0, 4, 10,1,dv,GC.Spread.Sheets.SheetArea.viewport);

Step4:创建二级数据验证

let dv2 = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=indirect(\$E1)");sheet.setDataValidator(0, 5, 10,1,dv2,GC.Spread.Sheets.SheetArea.viewport);

更加详细的示例可以点击这里跳转实战代码查看。

扩展链接:

Spring Boot框架下实现Excel服务端导入导出

项目实战:在线报价采购系统(React +SpreadJS+Echarts)

Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计


http://www.ppmy.cn/news/1019089.html

相关文章

Debezium系列之:增量快照初始化历史数据实际应用案例

Debezium系列之:增量快照初始化历史数据实际应用案例 一、需求背景二、查看数据库表数据三、使用增量快照采集历史数据四、初始化历史数据一、需求背景 采集数据库数据发送到Kafka Topic,供下游实时开发消费,在采集最新数据的同时,希望把历史数据也发送到Kafka Topic同时采…

研发工程师玩转Kubernetes——PVC通过storageClassName进行延迟绑定

不同的PV可以使用相同的StorageClass,它们是一对多的关系。 PV可以设置节点亲和性。比如下图,local-storage-class-waitforfirstconsumer-pv-ubuntuc只能在节点ubuntuc上;local-storage-class-waitforfirstconsumer-pv-ubuntud只能在节点ubu…

kafka-2.12使用记录

kafka-2.12使用记录 安装kafka 2.12版本 下载安装包 根据你的系统下载rpm /deb /zip包等等, 这里我使用的是rpm包 安装命令 rpm -ivh kafka-2.12-1.nfs.x86_64.rpm启动内置Zookeeper 以下命令要写在同一行上 /opt/kafka-2.12/bin/zookeeper-server-start.sh /opt/kafka-2…

leetcode原题 一次编辑(判定字符串是否只需要一次(或者零次)编辑)

题目: 字符串有三种编辑操作:插入一个英文字符、删除一个英文字符或者替换一个英文字符。 给定两个字符串,编写一个函数判定它们是否只需要一次(或者零次)编辑。 输入: first "pale" second "ple" 输出: True 解题思路&#xff…

WuThreat身份安全云-TVD每日漏洞情报-2023-08-09

漏洞名称:致远OA文件上传漏洞 漏洞级别:高危 漏洞编号:NULL 相关涉及:1. A6、A8、A8N的V8.0SP2、V8.1、V8.1SP1 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-19494 漏洞名称:Microsoft Exchange Server 欺骗漏洞 漏洞级别:高危 漏洞编号:CV…

MySQL SELECT语句知识点

目录 1、DELETE和TRUNCATE语句 2、REPLACE语句 3、SELECT语句中的算术表达式 4、NULL值的使用 5、定义字段的别名: 6、重复记录 7、限制所选择的记录 8、元字符(正则表达式) 9、数据分组(GROUP BY) 10、HAVING…

SpringBoot复习:(24)DeferredImportSelector

功能: 定一一个字符串数组,每个元素都是一个类的全限定名(包名类名),把这些类的实例注册到Spring 容器。 一、定义要注册的类: package cn.edu.tju.service;import java.util.Arrays; import java.util.Li…

HCIA 路由器工作原理 及其 静态路由配置

目录 1、路由器工作原理 2、获取未知网段的方法: 3、静态路由 1)写法: 2)扩展配置 a、环回接口 配置命令: 环回接口的作用: b、手工汇总 手工汇总作用: c、路由黑洞 d、缺省路由 配置…