Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.
foreword
In Excel-like table applications, the common demand scenario is based on the data linkage between cells. For example, after selecting a certain province, the drop-down items in other cells will automatically expand to the urban areas under the province. This article will start from the code and UI level Explain how to realize multi-level linkage between data.
UI realizes multi-level data linkage
Step1: set data;
Set the data in the following form, where the first line is the province information, and the content in the remaining lines is the urban area information corresponding to the province
Step2: Add a name manager
Follow the steps below to create a name manager respectively, where the name manager name is the province, and the reference area is the corresponding province area.
Step3: Add a level of data validation
In this scenario, the first level of data verification is province information, which is completed in the form of sequence verification.
Step4: Add secondary data validation
In this scenario, secondary data verification means that after the province is switched, the drop-down item of the cell representing the region is updated accordingly. Here, it is implemented in the form of sequence formula verification. The corresponding sequence verification formula indirect() function, the detailed operation is as follows:
It should be noted here that the reference cell in the indirect function needs to set a relative reference or an absolute reference according to the requirements. After the cascading verification of a single cell is done, if you want to expand to multiple rows, you only need to use the function of spreadjs to drag and fill. The corresponding operation is also given at the end of the above figure.
Code implements cascading data
The code implementation is consistent with the UI operation as a whole, and it is only necessary to translate the corresponding UI behavior into code implementation. The detailed code is as follows:
Step1: Set data
sheet.setArray(0,0,[
["陕西省","江苏省"],
["西安市","南京"],
["宝鸡市","常州"],
["汉中市","无锡"],
["渭南市","苏州"],
["延安市","泰州"],
["商洛市","镇江"],
["铜川市","宿迁"]
])
Step2: Set up the name manager
spread.addCustomName("陕西省","=Sheet1!\$A\$2:\$A\$8",0,0)
spread.addCustomName("江苏省","=Sheet1!\$B\$2:\$B\$8",0,0)
Here spread represents the entire file, and the name manager is divided into file level and worksheet level, which is used here on the entire file.
Step3: Set level one data verification
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: Create secondary data verification
let dv2 = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=indirect(\$E1)");
sheet.setDataValidator(0, 5, 10,1,dv2,GC.Spread.Sheets.SheetArea.viewport);
For more detailed examples, you can click here to jump to the actual combat code to view.
Extension link:
Implementing Excel server-side import and export under the Spring Boot framework
Project Combat: Online Quotation Procurement System (React +SpreadJS+Echarts)
Svelte framework combined with SpreadJS to realize pure front-end Excel online report design