4.3. 多重连弹の下拉级联 - 图1

    省市区级联,需求背景就不多说了,几乎是管理系统必备的一个功能,对于大部分初级开发者来说,做这种功能还是比较繁琐,又要写后端又要写前端。

    不用担心,Eova为你办妥了,你拿来就可以用了!

    案例:酒店管理>修改数据 省市区级联4.3. 多重连弹の下拉级联 - 图2

    实现详解:

    1.配置自定义JS4.3. 多重连弹の下拉级联 - 图3

    详情参考Demo中的JS文件!

    2.添加DB字段和元字段4.3. 多重连弹の下拉级联 - 图44.3. 多重连弹の下拉级联 - 图5

    详情查看Demo!

    3.效果4.3. 多重连弹の下拉级联 - 图64.3. 多重连弹の下拉级联 - 图7

    同理,也能实现 多级类型级联等任意的级联操作业务!


    V1.6 关于级联的优化升级

    1. // V1.6 之前的实现-手工拼接URL,重新加载
    2. var url = '/widget/comboJson?exp=select id ID,name CN from area where lv = 2 and pid = ' + newValue;
    3. $city.eovacombo({url : url}).reload();
    4. // 不安全,容易出现乱码,字符串处理异常等问题

    新的实现:

    1. // selectAreaByLv2AndPid 为预配置的 表达式Key
    2. $city.eovacombo({exp : 'selectAreaByLv2AndPid,' + newValue}).reload();

    表达式在哪配置?

    1. public class OSSConfig extends EovaConfig {
    2. /**
    3. * 自定义表达式(主要用于级联)
    4. */
    5. @Override
    6. protected void exp() {
    7. super.exp();
    8. // 区域级联查询
    9. exps.put("selectAreaByLv2AndPid", "select id ID,name CN from area where lv = 2 and pid = ?");
    10. exps.put("selectAreaByLv3AndPid", "select id ID,name CN from area where lv = 3 and pid = ?");
    11. // 用法,级联动态在页面改变SQL和参数
    12. // $city.eovacombo({exp : 'selectAreaByLv2AndPid,10'}).reload();
    13. // $city.eovacombo({exp : 'selectAreaByLv2AndPid,aaa,10'}).reload();
    14. // $find.attr('url', buildUrl(newValue));
    15. // $find.eovafind({exp : 'selectAreaByLv2AndPid,aaa,10'});
    16. }
    17. }