摘要：本文由葡萄城技術(shù)團(tuán)隊(duì)于CSDN原創(chuàng)并首發(fā)。轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開(kāi)發(fā)者提供專(zhuān)業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù)，賦能開(kāi)發(fā)者。

前言

在類(lèi)Excel表格應(yīng)用中，常用的需求場(chǎng)景是根據(jù)單元格之間的數(shù)據(jù)聯(lián)動(dòng)，例如選擇某個(gè)省份之后，其它單元格下拉項(xiàng)自動(dòng)擴(kuò)展為該省份下的市區(qū)，本文會(huì)從代碼及UI層面講解如何實(shí)現(xiàn)數(shù)據(jù)之間的多級(jí)聯(lián)動(dòng)。

UI實(shí)現(xiàn)多級(jí)數(shù)據(jù)聯(lián)動(dòng)

Step1：設(shè)置數(shù)據(jù)；

按照如下形式設(shè)置數(shù)據(jù)，其中第一行為省份信息，剩余行中的內(nèi)容為省份對(duì)應(yīng)的市區(qū)信息

Step2：添加名稱(chēng)管理器
按照如下操作，分別創(chuàng)建名稱(chēng)管理器，其中，名稱(chēng)管理器名稱(chēng)為省份，引用區(qū)域?yàn)閷?duì)應(yīng)的省份區(qū)域。

Step3：添加一級(jí)數(shù)據(jù)驗(yàn)證

在該場(chǎng)景中，一級(jí)數(shù)據(jù)驗(yàn)證是省份信息，采用序列驗(yàn)證的形式來(lái)完成。

Step4: 添加二級(jí)數(shù)據(jù)驗(yàn)證

在該場(chǎng)景中，二級(jí)數(shù)據(jù)驗(yàn)證是指切換省份之后，代表地區(qū)的單元格下拉項(xiàng)隨之更新，這里采用序列公式驗(yàn)證的形式來(lái)實(shí)現(xiàn)，對(duì)應(yīng)的序列驗(yàn)證公式indirect()函數(shù)，詳細(xì)操作如下：

這里需要注意的是，indirect函數(shù)中引用單元格需要根據(jù)需求設(shè)置好相對(duì)引用還是絕對(duì)引用。做好單個(gè)單元格的級(jí)聯(lián)驗(yàn)證之后，如果想擴(kuò)展到多行只需要利用spreadjs拖拽填充的功能即可，上圖最后也給出了對(duì)應(yīng)的操作。

代碼實(shí)現(xiàn)級(jí)聯(lián)數(shù)據(jù)

代碼實(shí)現(xiàn)整體與UI操作相吻合，只需要將對(duì)應(yīng)的UI行為翻譯為代碼實(shí)現(xiàn)即可。詳細(xì)代碼如下：

Step1: 設(shè)置數(shù)據(jù)

sheet.setArray(0,0,[["陜西省","江蘇省"],["西安市","南京"],["寶雞市","常州"],["漢中市","無(wú)錫"],["渭南市","蘇州"],["延安市","泰州"],["商洛市","鎮(zhèn)江"],["銅川市","宿遷"]])

Step2：設(shè)置名稱(chēng)管理器

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

這里spread代表的是整個(gè)文件，名稱(chēng)管理器分為文件級(jí)和工作表級(jí)，這里用的是整個(gè)文件上的。

Step3： 設(shè)置一級(jí)數(shù)據(jù)驗(yàn)證

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：創(chuàng)建二級(jí)數(shù)據(jù)驗(yàn)證

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

更加詳細(xì)的示例可以點(diǎn)擊這里跳轉(zhuǎn)實(shí)戰(zhàn)代碼查看。

擴(kuò)展鏈接：

Spring Boot框架下實(shí)現(xiàn)Excel服務(wù)端導(dǎo)入導(dǎo)出

項(xiàng)目實(shí)戰(zhàn)：在線(xiàn)報(bào)價(jià)采購(gòu)系統(tǒng)（React +SpreadJS+Echarts）

Svelte 框架結(jié)合 SpreadJS 實(shí)現(xiàn)純前端類(lèi) Excel 在線(xiàn)報(bào)表設(shè)計(jì)