🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
![](https://box.kancloud.cn/a71199634855a7552985be3cc0388c7a_244x159.png) 省市区级联,需求背景就不多说了,几乎是管理系统必备的一个功能,对于大部分初级开发者来说,做这种功能还是比较繁琐,又要写后端又要写前端。 不用担心,Eova为你办妥了,你拿来就可以用了! 案例:酒店管理>修改数据 省市区级联 ![](https://box.kancloud.cn/6a72afd986281900694a72b61c272073_644x98.png) 实现详解: 1.配置自定义JS ![](https://box.kancloud.cn/c54fa847c8583972ad835e5c6353c940_644x159.png) 详情参考Demo中的JS文件! 2.添加DB字段和元字段 ![](https://box.kancloud.cn/c8a1d98f1ae8cabfe3f29d2128a478d4_575x73.png) ![](https://box.kancloud.cn/9a22d22108d57df16ed9a2174bc8238d_644x48.png) 详情查看Demo! 3.效果 ![](https://box.kancloud.cn/5d4f66e836a3cd354ab90de5804f6e20_644x89.png) ![](https://box.kancloud.cn/8fea14c13e013c4cbe51cab7e17d685c_644x240.png) 同理,也能实现 多级类型级联等任意的级联操作业务! * * * * * V1.6 关于级联的优化升级 ~~~ // V1.6 之前的实现-手工拼接URL,重新加载 var url = '/widget/comboJson?exp=select id ID,name CN from area where lv = 2 and pid = ' + newValue; $city.eovacombo({url : url}).reload(); // 不安全,容易出现乱码,字符串处理异常等问题 ~~~ 新的实现: ~~~ // selectAreaByLv2AndPid 为预配置的 表达式Key $city.eovacombo({exp : 'selectAreaByLv2AndPid,' + newValue}).reload(); ~~~ 表达式在哪配置? ~~~ public class OSSConfig extends EovaConfig { /** * 自定义表达式(主要用于级联) */ @Override protected void exp() { super.exp(); // 区域级联查询 exps.put("selectAreaByLv2AndPid", "select id ID,name CN from area where lv = 2 and pid = ?"); exps.put("selectAreaByLv3AndPid", "select id ID,name CN from area where lv = 3 and pid = ?"); // 用法,级联动态在页面改变SQL和参数 // $city.eovacombo({exp : 'selectAreaByLv2AndPid,10'}).reload(); // $city.eovacombo({exp : 'selectAreaByLv2AndPid,aaa,10'}).reload(); // $find.attr('url', buildUrl(newValue)); // $find.eovafind({exp : 'selectAreaByLv2AndPid,aaa,10'}); } } ~~~