市县乡村四级级联（MINIUI实现）

一、前端页面实现
<fieldset class="layui-elem-field">
    <legend>行政区划信息</legend>
    <div class="layui-field-box" id="xzqhxx">
        <table style="width:99.5%;">
            <tr class="table_tr">
                <td class="table_td_label" align="right">市（省管县）</td>
                <td class="table_td_input" >
                    <input id="city" name="city" class="mini-combobox" width="95%" textField="name" valueField="id" enabled="false" showNullItem="true" nullItemText="请选择"
                           onvaluechanged="onCityChanged"/>
                </td>
                <td class="table_td_label" align="right">县（区）</td>
                <td class="table_td_input" >
                    <input id="county" name="county"  class="mini-combobox" textField="name" valueField="id" width="95%" showNullItem="true" nullItemText="请选择"
                           onvaluechanged="onCountyChanged"/>
                </td>
                <td class="table_td_label" align="right">乡镇（街道）</td>
                <td class="table_td_input" >
                    <input id="country" name="country"   class="mini-combobox" textField="name" valueField="id" width="95%" showNullItem="true" nullItemText="请选择"
                           onvaluechanged="onCountryChanged"/>
                    <span class="red_star">*</span>
                </td>
                <td class="table_td_label" align="right">村（社区）</td>
                <td class="table_td_input">
                    <input id="village" name="village" class="mini-combobox" textField="name" valueField="id" width="95%" showNullItem="true" nullItemText="请选择"
                           onvaluechanged="onVillageChanged" required="true"/>
                    <span class="red_star">*</span>
                </td>
            </tr>
            <tr>
                <td class="table_td_label" align="right">组</td>
                <td class="table_td_input">
                    <input id="group" name="group" class="mini-combobox" textField="name" showNullItem="true" nullItemText="请选择"
                           valueField="id" width="95%"/>
                </td>
            </tr>
        </table>
    </div>
</fieldset>
<!-- 自适应悬浮按钮 end -->
<script type="text/javascript">
    mini.parse();
    var city = mini.get("city");
    var county = mini.get("county");
    var country = mini.get("country");
    var village = mini.get("village");
    var group = mini.get("group");
    var xzqhxx =new mini.Form("#xzqhxx");//
    $(document).ready(function(){
        var url="${basePath}/jmggyw/common/querySxxc?id="+provincebm;
        city.setUrl(url);
        //获取集合下标，给登录用户默认市级单位
        var index = getMapSubscript(city.data,citybm);
        city.select(index);
        var id = city.getValue();
        onCityChanged(id);
    });
    //选中市
    function onCityChanged(e) {
        if("1" == sgxflag){
            var id = city.getValue();
            county.setValue("");
            url="${basePath}/jmggyw/common/querySxxc?id="+id;
            county.setUrl(url);
            if(countybm==""||countybm==null){
                county.select(0);
            }else{
                var index = getMapSubscript(county.data,countybm);
                county.select(index);
                mini.get("county").setEnabled(false);
            }
            var id = county.getValue();
            onCountyChanged(id);
        }else{
            var id = city.getValue();
            country.setValue("");
            url="${basePath}/jmggyw/common/querySxxc?id="+id;
            country.setUrl(url);
            if(countybm==""||countybm==null){
                country.select(0);
            }else{
                var index = getMapSubscript(country.data,countrybm);
                country.select(index);
                mini.get("county").setEnabled(false);
            }
            var id = country.getValue();
            onCountryChanged_sgx(id);
        }
        if(sbjandqx=="1"){//省管县比正常的少一级
            url="${basePath}/jmggyw/common/querySbjandQx?id="+id;
            county.setValue("");
            county.setUrl(url);
            county.setEnabled(true);
        }
    };

    //乡
    function onCountryChanged_sgx(e) {
        debugger;
        var id = country.getValue();
        var text = country.getText();
        village.setValue("");
        url="${basePath}/jmggyw/common/querySxxc?id="+id;
        village.setUrl(url);
        if(villagebm==""||villagebm==null){
            if("大中专院校"==text){
                village.select(1);
            }else{
                village.select(0);
            }
        }else{
            var index = getMapSubscript(village.data,villagebm);
            village.select(index);
            village.setEnabled(false);
        }
        var id = village.getValue();
        onVillageChanged(id);
    };

    //选中县
    function onCountyChanged(e) {
        var id = county.getValue();
        country.setValue("");
        url="${basePath}/jmggyw/common/querySxxc?id="+id;
        country.setUrl(url);
        if(countrybm==""||countrybm==null){
            country.select(0);
        }else{
            var index = getMapSubscript(country.data,countrybm);
            country.select(index);
            mini.get("country").setEnabled(false);
        }
        var id = country.getValue();
        onCountryChanged(id);
    };

    //乡
    function onCountryChanged(e) {
        var id = country.getValue();
        village.setValue("");
        url="${basePath}/jmggyw/common/querySxxc?id="+id;
        village.setUrl(url);
        if(villagebm==""||villagebm==null){
            village.select(0);
        }else{
            var index = getMapSubscript(village.data,villagebm);
            village.select(index);
            mini.get("village").setEnabled(false);
        }
        var id = village.getValue();
        onVillageChanged(id);
    };

    //村
    function onVillageChanged(e) {
        var id = village.getValue();
        group.setValue("");
        url="${basePath}/jmggyw/common/querySxxc?id="+id;
        group.setUrl(url);
        group.select(0);
    };
    //获取下标
    function getMapSubscript(map,value){
       //获取下标
        var index = 0;
        for(var i=0;i<map.length;i++){
           if(value==(map[i]).id){
              index = i;
           }
        }
        return index;
    };

二、后台数据获取（放在MAP中以供提取）

/**
 * 获取下级行政区划代码
 * @param
 * @return
 */
public List<Map<String, Object>> querySxxc(String id) {
    StringBuffer sql = new StringBuffer();
    sql.append("select AAB301 id, --行政区划代码\n");
    sql.append("       AAE044 name --名称\n");
    sql.append("  from AB51\n");
    sql.append(" where BAE024 = ? order by AAB301\n");
    return DBUtils.query(sql.toString(), id);
}

备注：

<input id="group" name="group" class="mini-combobox" textField="name" showNullItem="true" nullItemText="请选择"
                           valueField="id" width="95%"/>
该下拉是通过mini-combobox来实现的有缺点也有优点，缺点是不能实现联想查询，优点是如果ID不同，姓名相同时，选中那个姓名获取那个id

mini-comselect来实现的有缺点也有优点，优点能实现联想查询，缺点是如果ID不同，姓名相同时，选中姓名相同时永远获取第一个ID值

市县乡村四级级联（MINIUI实现）

猜你喜欢