利用数据验证实现级联效果

有小伙伴想要实现下拉菜单的多级联动效果，可以通过valuechanged事件实现，也可以通过数据验证实现，本次教程我们来看下如何通过数据验证实现多级联动效果。本次我们以省、市、区为例子。

首先我们需要准备两张表，我们给第一张表准备数据，命名为“码表”，这是我准备的数据，这些数据是通过setArray设置的。


然后给所有省份起个名称（例如：省份），然后同样方法给每个省份所对应的城市以其省份命名，（例如：广州、湛江的命名是广东省），以然后同样方法给每个城市所对应的区以其城市命名，（例如：雁塔区、雁塔1区的命名是西安市），我们需要用到addCustomName这个接口。例如：

1. spread.addCustomName('省份','=码表!$A$1:$E$1', 0, 0);

复制代码

接着，我们来到另一张表添加上公式列表数据验证，在省份这一列，我们的公式为“=省份”

1. var dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=省份");
   
2.         sheet.setDataValidator(1, 0, 5,1,dv,GC.Spread.Sheets.SheetArea.viewport);

复制代码

在城市这一列，我们的公式为“=INDIRECT(A2)”，A2这是我们添加省份数据验证的第一个单元格。这个是关于这个公式的简介：https://demo.grapecity.com.cn/spreadjs/help/docs/INDIRECT.html

1. var dv1 = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=INDIRECT(A2)");
   
2.         sheet.setDataValidator(1, 1, 5,1,dv1,GC.Spread.Sheets.SheetArea.viewport);

复制代码

同理，我们为区这一列添加上对应的数据验证

1. var dv2 = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=INDIRECT(B2)");
   
2.         sheet.setDataValidator(1, 2, 5,1,dv2,GC.Spread.Sheets.SheetArea.viewport);
   

复制代码

最后，给这个表单添加上初始化的数据即可完成。

下载附件即可查看完整demo

如果省份 为空，如何设置达到 所有 城市 都显示。

采用：var dv1 = GC.Spread.Sheets.DataValidation.createFormulaListValidator('=IF(A1<>"","=INDIRECT(A1)","=码表1!$B$1B$2)"');
没有实现。

两个思路，以上述示例中的省份-城市级联为例
1.添加一个下拉项“所有省”，来代表所有城市，重新给设置一个对应的城市区域（必须是单行或者单列才行，多行又多列的区域不生效），这样选择“所有省”时，就会级联出所有城市

1. sheet1.setArray(0,0,[['陕西省','广东省','湖南省','四川省',"福建省","所有省"]])
   
2. sheet1.setArray(1,5,['宝鸡市','湛江市',"长沙市","成都市","厦门市","西安市","广州市","株洲市","眉山市","福州市"])
   
3. spread.addCustomName('所有省','=码表!$F$2:$F$11', 1, 5);
   

复制代码

2.在第一个的基础上，修改城市单元格的数据验证公式，省份为空时，显示所有，这个就实现了你要的效果了

1. var dv1 = GC.Spread.Sheets.DataValidation.createFormulaListValidator('=IF(A2="",所有省,INDIRECT(A2))');
   
2.         sheet.setDataValidator(1, 1, 5,1,dv1,GC.Spread.Sheets.SheetArea.viewport);

复制代码

级联1.zip (48.93 KB, 下载次数: 34)

2022-5-9 12:23 上传

点击文件名下载附件

测试成功，解决问题非常及时，准确。描述清晰，简要。非常感谢！！！

不客气，