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

这篇具有很好参考价值的文章主要介绍了如何实现Excel中多级数据联动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

前言

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

UI实现多级数据联动

Step1:设置数据;

按照如下形式设置数据,其中第一行为省份信息,剩余行中的内容为省份对应的市区信息
如何实现Excel中多级数据联动,excel

Step2:添加名称管理器
按照如下操作,分别创建名称管理器,其中,名称管理器名称为省份,引用区域为对应的省份区域。
如何实现Excel中多级数据联动,excel

Step3:添加一级数据验证

在该场景中,一级数据验证是省份信息,采用序列验证的形式来完成。
如何实现Excel中多级数据联动,excel

Step4: 添加二级数据验证

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

这里需要注意的是,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);

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

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

扩展链接:

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

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

Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计文章来源地址https://www.toymoban.com/news/detail-645596.html

到了这里,关于如何实现Excel中多级数据联动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java】百万数据excel导出功能如何实现

    人不走空                                                                          目录         🌈个人主页:人不走空       💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 前言 1.异步处理 1.1 使用job 1.2 使用mq 2.使用easyexcel 3.分页查询 4.多个she

    2024年02月20日
    浏览(31)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(34)
  • vue 前端导出Excel表格(基础版 + 多级标题)纯前端导出

    先看效果   1、安装依赖 2、在项目的入口 main.js  引入 3、直接使用 4、完整代码直接复制即可 ------------------------------------分割-------------------------------------------- 1、还是npm下载依赖 2、要新建一个文件,Export2Excel.js 文件,我是从某个网址下载的,我给忘了,这里我直接复制过

    2024年02月12日
    浏览(43)
  • EasyExcel+POI制作带有有效性校验及下拉联动的Excel模板

    最近在做一个CRM系统的人员销售目标导入的相关需求,需要将销售人员的目标导入到系统中,就要求在Excel导入模板中 填写销售人员Id 和销售人员姓名。在使用的时候,这是一个易错的点,因为这两个字段交给了使用者去自由填写的话,是很容易填错的。除了文字本身填多填

    2024年02月11日
    浏览(29)
  • 2023年4月实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

    首先,来看下效果图 在线体验地址:https://geojson.hxkj.vip,并提供实时geoJson数据文件下载 可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据(可精确到乡镇/街道级)、省市区县街道乡村五级

    2023年04月19日
    浏览(31)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(54)
  • python如何操作excel,在excel中读取和写入数据

    Excel 是 Microsoft 为使用 Windows 和 Apple Macintosh 操作系统的电脑编写的一款电子表格软件。直观的界面、出色的计算功能和图表工具,再加上成功的市场营销,使 Excel 成为最流行的个人计算机数据处理软件。在 1993 年,作为 Microsoft Office 的组件发布了5.0版之后, Excel 就开始成为

    2024年02月03日
    浏览(35)
  • python 如何导入excel数据

    你可以使用`pandas`库来导入Excel数据。下面是一个示例: 其中,`data.xlsx`是你的Excel文件路径。你可以使用`read_excel`函数来读取Excel文件,并将数据存储在一个`DataFrame`对象中。然后,你可以使用`head`方法打印数据的前几行。

    2024年02月06日
    浏览(33)
  • Python如何读取Excel表格数据

    环境: Pycharm IDE 3.9  2021.2.1 Excel作为目前主要的流行数据表格,其存储的数据整齐,强可观性。需要对大量的数据进行分析时,可以利用python脚本语言进行数据分析。 python读取excel数据: 1.打开 pycharm IDE ,新建项目,在IDE 的UI界面下点击左下角的 Python Packages .   此项用于安

    2024年02月05日
    浏览(32)
  • Vue中如何实现Excel导入导出

    在前面员工的添加是一个一个进行的,如果一次性添加多个员工信息,这时候就会很繁琐 因此需要我们开发一个批量导入的功能,将用户的信息存储到 excel 中然后进行批量导入 1. 分析 vue-element-admin 中的导入方案 在vue-element-admin中,大佬已经封装好了Excel的导入导出方案,我

    2023年04月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包