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

摘要:本文由葡萄城技术团队于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 在线报表设计

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/75030.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Vue-Router】嵌套路由

footer.vue <template><div><router-view></router-view><hr><h1>我是父路由</h1><div><router-link to"/user">Login</router-link><router-link to"/user/reg" style"margin-left…

62、华为昇腾开发板Atlas 200I DK A2配置mmpose的hrnet模型推理python/c++

基本思想&#xff1a;适配mmpose模型&#xff0c;记录一下流水帐&#xff0c;环境配置和模型来自&#xff0c;请查看参考链接。 链接: https://pan.baidu.com/s/1IkiwuZf1anyKX1sZkYmD1g?pwdi51s 提取码: i51s 一、转模型 (base) rootdavinci-mini:~/sxj731533730# atc --mo…

pytest的fixture梳理

fixture特性 1. 可以重复使用&#xff0c;多个用例可以使用同一个fixture 2. 一个测试用例可以使用多个装置 import pytest # Arrange pytest.fixture def first_entry():return "a"# Arrange pytest.fixture def second_entry():return 2# Arrange pytest.fixtur…

深入探索:解读创意的力量——idea的下载、初步使用

目录 ​编辑 1.IDEA的简介 2.IDEA的下载 2.1下载路径https://www.jetbrains.com/zh-cn/idea/download/?sectionwindows​编辑​ 2.2下载的步骤 3 idea的初步使用 3.1新建一个简单的Java项目 3.1.1首先需要创建一个新的工程 3.1.2创建一个新的项目&#xff08;模块&am…

java实现docx,pdf文件动态填充数据

一&#xff0c;引入pom 根据需求引入自己所需pom org.apache.poi poi 4.1.1 org.apache.poi poi-ooxml 4.1.1 org.jxls jxls 2.6.0 ch.qos.logback logback-core org.jxls jxls-poi 1.2.0 fr.opensagres.xdocreport fr.opensagres.xdocreport.core 2.0.2 fr.opensagres.xdocrep…

【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式 代码&#xff1a; <style> p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip; }p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;ove…

深入探索Spring框架:解密核心原理、IOC和AOP的奥秘

深入探索Spring框架&#xff1a;解密核心原理、IOC和AOP的奥秘 1. 理解 Spring 的核心原理1.1 控制反转&#xff08;IOC&#xff09;1.2 面向切面编程&#xff08;AOP&#xff09; 2. 深入 IOC 容器的实现机制2.1 容器的创建2.2 Bean 的生命周期2.3 依赖注入 3. 深入 AOP 的实现…

IP 协议的相关特性和数据链路层相关知识总结

目录 IP 协议的相关特性 一、IP协议的特性 二、 IP协议数据报格式 三、 IP协议的主要功能 1. 地址管理 动态分配 IP地址 NAT机制 NAT背景下的通信 IPV6 2. 路由控制​​​​​​​ 3.IP报文的分片与重组 数据链路层相关知识 1、以太网协议&#xff08;Ethernet&#xff09; 2.M…

SpringBoot系列---【SpringBoot在多个profiles环境中自由切换】

SpringBoot在多个profiles环境中自由切换 1.在resource目录下新建dev&#xff0c;prod两个目录&#xff0c;并分别把dev环境的配置文件和prod环境的配置文件放到对应目录下&#xff0c;可以在配置文件中指定激活的配置文件&#xff0c;也可以默认不指定。 2.在pom.xml中最后位置…

php从静态资源到动态内容

1、从HTML到PHP demo.php:后缀由html直接改为php,实际上当前页面已经变成了动态的php应用程序脚本 demo.php: 允许通过<?php ... ?>标签,添加php代码到当前脚本中 php标签内部代码由php.exe解释, php标签之外的代码原样输出,仍由web服务器解析 <!DOCTYPE html>…

zabbix案例--zabbix监控Tomcat

目录 一、 部署tomcat 二、配置zabbix-java-gateway 三、配置zabbix-server 四、配置zabbix-web界面 一、 部署tomcat tar xf apache-tomcat-8.5.16.tar.gz -C /usr/local/ ln -sv /usr/local/apache-tomcat-8.5.16/ /usr/local/tomcat cd /usr/local/tomcat/bin开启JMX…

KCC@广州开源读书会广州开源建设讨论会

亲爱的开源读书会朋友们&#xff0c; 在下个周末我们将举办一场令人激动的线下读书会&#xff0c;探讨两本引人入胜的新书《只是为了好玩》和《开源之迷》。作为一个致力于推广开源精神和技术创新的社区&#xff0c;这次我们还邀请了圈内大咖前来参与&#xff0c;会给大家提供一…

手机出现 不读卡 / 无信号时应该怎么办?

当手机屏幕亮起&#xff0c;一般在屏幕最上方都会有代表手机卡状态的显示&#xff0c;其中网络信号和读卡状态的标识&#xff0c;依旧有很多人分不太清&#xff0c;更不清楚改怎么办了。 1、当我们的手机里有两张卡时&#xff0c;则会有两个信号显示 2、信号状态一般是由短到…

Markdown语法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Markdown语法目录 前言1.标题2.文本样式3.列表四.图片5.链接6.目录7.代码片7.表格8.注脚9.注释10.自定义列表11.LaTeX数学公式12.插入甘特图13.插入UML图14.插入Merimaid流程…

做海外游戏推广有哪些条件?

做海外游戏推广需要充分准备和一系列条件的支持。以下是一些关键条件&#xff1a; 市场调研和策略制定&#xff1a;了解目标市场的文化、玩家偏好、竞争格局等是必要的。根据调研结果制定适合的推广策略。 本地化&#xff1a;将游戏内容、界面、语言、货币等进行本地化&#…

Mendix 基础审计模块介绍

一、前言 作为售前顾问&#xff0c;帮助客户选型低代码产品是日常工作。考察一家低代码产品的好坏&#xff0c;其中一个维度就是产品的成熟度。产品成熟度直接影响产品在使用中的稳定性和用户体验&#xff0c;对于新工具导入和可持续运用至关重要。 那怎么考察一个产品是否成…

input输入框自动填充后消除背景色

一般自动填充后会有一个突出的浅蓝色背景&#xff0c;一定也不好看&#xff0c;所以想把它去掉&#xff1a; 这个时候&#xff0c;就要用到浏览器的样式设置了&#xff1a; input:-webkit-autofill {background: transparent;transition: background-color 50000s ease-in-ou…

matlab使用教程(12)—随机数种子和随机数流

1.生成可重复的随机数 1.1指定种子 本示例显示如何通过首先指定种子来重复生成随机数数组。每次使用相同种子初始化生成器时&#xff0c;始终都可以获得相同的结果。首先&#xff0c;初始化随机数生成器&#xff0c;以使本示例中的结果具备可重复性。 rng( default ); 现在…

护眼灯值不值得买?什么护眼灯对眼睛好

想要选好护眼台灯首先我们要知道什么是护眼台灯&#xff0c;大的方向来看&#xff0c;护眼台灯就是可以保护视力的台灯&#xff0c;深入些讲就是具备让灯发出接近自然光特性的光线&#xff0c;同时光线不会伤害人眼而出现造成眼部不适甚至是视力降低的照明设备。 从细节上看就…

迁移协调器 - 就地迁移模式

在本系列博客的第一部分中&#xff0c;我们从高层级视角介绍了 Migration Coordinator 提供的所有模式&#xff0c;Migration Coordinator 是内置于 NSX 中的完全受 GSS 支持的工具&#xff0c;可将 NSX for vSphere 迁移到 NSX (NSX-T)。 本系列的第二篇博客将详细介绍就地迁…