Resumen: Este artículo fue publicado originalmente en CSDN por el equipo técnico de Grape City. Indique la fuente de la reimpresión: sitio web oficial de Grape City , Grape City proporciona a los desarrolladores herramientas, soluciones y servicios de desarrollo profesional para empoderar a los desarrolladores.
prefacio
En las aplicaciones de tablas similares a Excel, el escenario de demanda común se basa en el enlace de datos entre las celdas. Por ejemplo, después de seleccionar una determinada provincia, los elementos desplegables en otras celdas se expandirán automáticamente a las áreas urbanas de la provincia. Este artículo comenzará desde el código y el nivel de la interfaz de usuario. Explicará cómo realizar un enlace de varios niveles entre los datos.
La interfaz de usuario realiza un enlace de datos de varios niveles
Paso 1: establecer datos;
Configure los datos en el siguiente formulario, donde la primera línea es la información de la provincia, y el contenido en las líneas restantes es la información del área urbana correspondiente a la provincia
Paso 2: agregar un administrador de nombres
Siga los pasos a continuación para crear un administrador de nombres respectivamente, donde el nombre del administrador de nombres es la provincia y el área de referencia es el área de la provincia correspondiente.
Paso 3: agregue un nivel de validación de datos
En este escenario, el primer nivel de verificación de datos es la información de la provincia, que se completa en forma de verificación de secuencia.
Paso 4: Agregar validación de datos secundarios
En este escenario, la verificación de datos secundarios significa que después de cambiar la provincia, el elemento desplegable de la celda que representa la región se actualiza en consecuencia. Aquí, se implementa en forma de verificación de fórmula de secuencia. La fórmula de verificación de secuencia correspondiente indirecta () función, la operación detallada es la siguiente:
Cabe señalar aquí que la celda de referencia en la función indirecta debe establecer una referencia relativa o una referencia absoluta según el requisito. Después de realizar la verificación en cascada de una sola celda, si desea expandirse a varias filas, solo necesita usar la función de spreadjs para arrastrar y llenar La operación correspondiente también se proporciona al final de la figura anterior.
El código implementa datos en cascada
La implementación del código es consistente con la operación de la interfaz de usuario en su conjunto, y solo es necesario traducir el comportamiento de la interfaz de usuario correspondiente en la implementación del código. El código detallado es el siguiente:
Paso 1: Establecer datos
sheet.setArray(0,0,[
["陕西省","江苏省"],
["西安市","南京"],
["宝鸡市","常州"],
["汉中市","无锡"],
["渭南市","苏州"],
["延安市","泰州"],
["商洛市","镇江"],
["铜川市","宿迁"]
])
Paso 2: configurar el administrador de nombres
spread.addCustomName("陕西省","=Sheet1!\$A\$2:\$A\$8",0,0)
spread.addCustomName("江苏省","=Sheet1!\$B\$2:\$B\$8",0,0)
Aquí, spread representa todo el archivo, y el administrador de nombres se divide en nivel de archivo y nivel de hoja de trabajo, que se usa aquí en todo el archivo.
Paso 3: establecer la verificación de datos de nivel uno
let dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=Sheet2!\$A\$1:\$B\$1");
sheet.setDataValidator(0, 4, 10,1,dv,GC.Spread.Sheets.SheetArea.viewport);
Paso 4: crear una verificación de datos secundaria
let dv2 = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=indirect(\$E1)");
sheet.setDataValidator(0, 5, 10,1,dv2,GC.Spread.Sheets.SheetArea.viewport);
Para ejemplos más detallados, haga clic aquí para saltar al código de combate real para ver.
Enlace de extensión:
Project Combat: Sistema de adquisición de cotizaciones en línea (React +SpreadJS+Echarts)