《JeecgBoot系列》 如何设计表单实现"下拉组件二级联动" ? 以省市二级联动为例
一、准备字典表
1.1 创建字典表
CREATE TABLE sys_link_table (
id int NULL,
pid int NULL,
name varchar(64) null
);
1.2 准备数据
| id | pid | name |
|---|---|---|
| 1 | 全国 | |
| 2 | 1 | 浙江省 |
| 3 | 2 | 杭州市 |
| 4 | 2 | 宁波市 |
| 5 | 1 | 江苏省 |
| 6 | 5 | 南京市 |
| 7 | 5 | 苏州市 |
| 8 | 1 | 广东省 |
| 9 | 8 | 广州市 |
| 10 | 8 | 珠海市 |
二、创建测试表单
2.1 新增表单
2.2 表单数据库属性
新增字段省：province
新增字段市：city
2.3 页面属性
页面属性->province字段组件类型设置为联动组件
2.4 检验字段
校验字段-> province字段字典table填如下json ：
{
table: "sys_link_table",
txt: "name",
key: "id",
linkField: "city",
idField: "id",
pidField: "pid",
condition:"pid = '1'"
}
| 名称 | 描述 |
|---|---|
| table | 数据库表名 |
| txt | 控件显示的值 |
| key | 控件需要存储的值 |
| linkField | 级联组件的其他字段名称，上例配置了市，区字段名 |
| idField | 数据的标识 |
| pidField | 上下级关系的表示字段 |
| condition | 联动组件 第一个下拉框的数据查询条件 |
2.5 同步数据库
同步数据库后，会根据当前配置表结构，在数据库中创建对应表
三、功能测试
功能测试方便调试表单内容
3.1 新增-测试联动效果
当新增数据时，如选择浙江省，则根据联动效果，会提供浙江省对应的市下拉框，提供选择
3.2 查看数据
因为字典表是sys_link_table,表单对应的表是sys_link_test，
在选择表单中选择省的时候，会从sys_link_table中取name作为值。
当联动到市的时候，会取对应的id作为值。
四、表单优化
如上图所示，字段“市"的值是数字，查看不太方便。
可以选择使用字典，匹配对应的值。
4.1 新增字典
创建字典sys_link_city
4.2 配置字典
sys_link_table中的id作为数据值，name作为名称
4.3 校验字段-city字段配置字典
将新增的字典名sys_link_city,配置到city字段的字典Code处
4.4 再次查看数据
字段city配置好字典后，再次查看已经比较清晰。
