如何实现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 在线报表设计

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BEV Review】论文 Delving into the Devils of Bird’s-eye-view 2022-9 笔记

背景 一般来说,自动驾驶车辆的视觉传感器(比如摄像头)安装在车身上方或者车内后视镜上。无论哪个位置,摄像头所得到的都是真实世界在透视视图(Perspective View)下的投影(世界坐标系到图像坐标系…

git Authentication failed

情况是这样的,之前看代码只是clone了一份,但随着分支越来越多,有时候切换分支时必须先把修改的代码 stash 一下,觉得很麻烦,于是又clone了一份代码。然后pull代码是正常的,当push 代码的时候,去…

函数(2)

6. 函数的声明和定义 6.1 函数声明: 1. 告诉编译器有一个函数叫什么,参数是什么,返回类型是什么。但是具体是不是存在,函数 声明决定不了。 2. 函数的声明一般出现在函数的使用之前。要满足先声明后使用。 3. 函数的声明一般要放…

C语言学习笔记---数据的存储详解

C语言程序设计笔记---015 C语言数据的存储1、数据类型的意义1.1、unsigned与signed数据类型例程11.2、补码与原码相互转换例程2 2、大小端的介绍2.1、大小端的例程12.2、大小端的例程2 --- 判断当前编译器环境属于大端或小端 3、综合练习题探究数据的存储3.1、练习题13.2、练习…

SpringBoot中properties、yml、yaml的优先级

原理 配置优先级低的会先加载然后会被配置优先级高的覆盖 验证 创建SpringBoot项目(网址) 在resource目录下创建application.properties、application.yml、application.yaml文件 运行 结论 优先级顺序: properties>yml>yaml

【Spring】如果你需要使用重试机制,请使用Spring官方的Spring Retry

文章目录 前言Spring Retry的基本使用第一步,引入Spring Retry的jar包第二步,构建一个RetryTemplate类第三步,使用RETRY_TEMPLATE注意事项 拓展方法降级操作重试策略:时间策略重试策略:指定异常策略 前言 Spring Retr…

世纪之争:量子物理学解决了「黑洞悖论」

在黑洞内部,20 世纪物理学的两大理论支柱似乎发生了冲突。现在,一群年轻的物理学家认为,他们通过诉诸新世纪的中心支柱——量子信息物理学,已经解决了这一冲突。 2013 年 8 月,数十位著名理论物理学家齐聚加利福尼亚州…

NRF24L01+数据手册_关于几种工作模式

使用的是官方数据手册的章节编号,原文截图方便对照,部分翻译(标蓝)、个人理解(标紫),关键信息(标红)。 6.1 Operational Modes操作模式 6.1.1 State diagram状态机图 6…

初识结构体

文章目录 目录1. 结构体类型的声明1.1 结构的基础知识1.2 结构的声明1.3 结构成员的类型1.4 结构体变量的定义和初始化 2. 结构体成员的访问3. 结构体传参 目录 结构体类型的声明结构体初始化结构体成员访问结构体传参 1. 结构体类型的声明 1.1 结构的基础知识 结构是一些值的…

优哲SSD大文件写性能测试

SDD磁盘性能测试: 空盘: 大文件读,写,读写(4/6)性能测试,删除性能测试,N进程,N线程 小文件读,写,读写(4/6)性能测试&am…

《Learning Combinatorial Optimization Algorithms over Graphs》阅读笔记

一.文章概述 本文提出将强化学习和图嵌入的组合以端到端地自动为图上组合优化问题设计贪心启发式算法,以避免设计传统算法所需要的大量专业知识和试错。学得的贪心策略行为类似增量构造解决方案的元算法,动作由解决方案当前状态上的图嵌入网络确定。作者…

【BASH】回顾与知识点梳理(二十二)

【BASH】回顾与知识点梳理 二十二 二十二. Linux 账号管理22.1 Linux 的账号与群组使用者标识符: UID 与 GID使用者账号/etc/passwd 文件结构/etc/shadow 文件结构 关于群组: 有效与初始群组、groups, newgrp/etc/group 文件结构有效群组(effective grou…