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

收藏

本帖最后由 Derrick.Jiao 于 2021-7-13 15:41 编辑

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

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

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

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

复制代码

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

var dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=省份");
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

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

复制代码

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

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

复制代码

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

下载附件即可查看完整demo

传禄 · 传禄

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

传禄 · 传禄

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

B$2)"');
没有实现。

Richard.Ma · Richard.Ma

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

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

复制代码

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

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

复制代码

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

传禄 · 传禄

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

Richard.Ma · Richard.Ma

不客气，

		自动登录	找回密码
密码			立即注册

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

5 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证