省市区下拉框联动例子

常见场景：在表单中通过下拉框联动来进行省市区的三级联动，该例子提供基础原理跟Demo，具体细节优化可用户自己进行修改。

思路：通过数据库查表根据地区ID关联进行下拉联动。

操作步骤：

第一步：模块下创建两个表单，分别是"省市区联动效果"和"省市区联动数据"；（可看附件中表单源码）



第二步："省市区联动数据"表单创建字段，跟我附件中上传的省市区联动的Excel里面的列保持一致；



（我是直接用平台里面的视图作为省市区的数据基础，用户也可以自己将Excel导入数据库中直接查表操作也行）

第三步："省市区联动数据"表单一键生成视图；



第四步：高级工具 - Excel导入配置 ，配置导入模板，将Excel的数据导入到省市区联动数据中；





第五步：导入省市区数据Excel到省市区联动数据视图中；



第六步：创建省市区联动效果的表单，添加省、市、区三个字段，并添加选项脚本。

1. // 城市 - 选项脚本
   
2. (function(){        
   
3.      var value = getItemValueAsString("省份");      
   
4.      var opts = $TOOLS.createOptions();      
   
5.      if(value!=""){      
   
6.          var sql="select * from tlk_省市区联动数据 where item_父级ID='"+value+"'";     
   
7.          println("sql--->"+sql);     
   
8.          var query = queryBySQL(sql);         
   
9.          if(query!=null){         
   
10.              for(var  i = 0 ; i <query.size();i++){      
    
11.                  var doc=query.get(i);      
    
12.                  var id = doc.getItemValueAsString("区域代码");           
    
13.                  var name = doc.getItemValueAsString("地域名称");         
    
14.                  opts.add(name,id);      
    
15.              }         
    
16.          }         
    
17.       }         
    
18. return opts;         
    
19. })()

复制代码

1. // 省份 - 选项脚本
   
2. (function(){         
   
3.         var sql="SELECT * FROM tlk_省市区联动数据 WHERE ITEM_父级ID='100000'";   
   
4.         var opts = $TOOLS.createOptions();         
   
5.         var query = queryBySQL(sql);         
   
6.         if(query!=null){         
   
7.                 for(var  i = 0 ; i <query.size() ; i++){   
   
8.                         var doc=query.get(i);      
   
9.                         var id = doc.getItemValueAsString("区域代码");           
   
10.                         var name = doc.getItemValueAsString("地域名称");         
    
11.                         opts.add(name,id);                      
    
12.                 }         
    
13.         }         
    
14.         return opts;         
    
15. })()

复制代码

1. //区域 - 选项脚本
   
2. (function(){   
   
3.     var opts = $TOOLS.createOptions();   
   
4.         var value = getItemValueAsString("城市");   
   
5.     if(value!=""){   
   
6.                 var sql="select * from tlk_省市区联动数据 where item_父级ID='"+value+"'";   
   
7.                 var query = queryBySQL(sql);      
   
8.         if(query!=null){      
   
9.             for(var  i = 0 ; i <query.size() ; i++) {   
   
10.                 var doc=query.get(i);   
    
11.                 var id = doc.getItemValueAsString("区域代码");        
    
12.                 var name = doc.getItemValueAsString("地域名称");      
    
13.                 opts.add(name,id);   
    
14.             }      
    
15.                 }      
    
16.     }   
    
17. return opts;      
    
18. })()

复制代码

操作效果：



备注：已对表单源码和导入配置源码还有省市区数据的Excel压缩打包成war，大佬们可以自行下载使用。

附件： 省市区联动例子.rar (361.37 KB, 下载次数: 990)

2021-1-28 14:32 上传

点击文件名下载附件