基於layUI調用后台數據實現區域信息級聯查詢

本文轉載自查看原文 2019-08-23 17:43 935 layUI/ 級聯查詢/ 聯動展示

基於layUI調用后台數據實現區域信息級聯查詢

1.基本思路

后台提供根據區域編碼查詢區域列表公共接口
頁面初始化調用后台接口加載所有省份
點擊省份將省份區域編碼傳入后台查詢該省份下所有地市信息，以此類推

2.數據表結構展示

SELECT
    COLUMN_NAME 列名,
    DATA_TYPE 字段類型,
    CHARACTER_MAXIMUM_LENGTH 長度,
    IS_NULLABLE 是否為空,
    COLUMN_COMMENT 備注
FROM
    INFORMATION_SCHEMA. COLUMNS
WHERE
    table_name = 'td_area';

3.數據詳解

3.1.查看所有省份數據

 select * from td_area t where t.level = 0 and t.parent_code = 0;

3.2.根據省份編碼查詢地市編碼

以北京市為例，級別編碼變為1，北京市的區域編碼作為查詢條件的父級編碼，依次類推即可

 select * from td_area t where t.level = 1 and t.parent_code = 110000000000;

3.3.腳本文件下載地址

https://download.csdn.net/download/u010427935/11604164

4.后端接口實現

我這里以Java實現的，單表查詢就不貼具體代碼了，這里只展示具體返回的json格式數據和入參數據

入參:就兩個參數，級別編碼和父級編碼

響應部分json格式數據及截圖

{
    "code": 200,
    "msg": "success",
    "data": [
        {
            "level": 0,
            "parentCode": 0,
            "areaCode": 110000000000,
            "zipCode": 0,
            "cityCode": "",
            "name": "北京市",
            "shortName": "北京",
            "mergerName": "北京",
            "pinyin": "BeiJing",
            "lng": 116.407526,
            "lat": 39.90403
        },
        {
            "level": 0,
            "parentCode": 0,
            "areaCode": 120000000000,
            "zipCode": 0,
            "cityCode": "",
            "name": "天津市",
            "shortName": "天津",
            "mergerName": "天津",
            "pinyin": "TianJin",
            "lng": 117.200983,
            "lat": 39.084158
        }
    ]
}

View Code

5.前端具體代碼

5.1.HTML頁面,具體js和css修改為自己項目所在路徑即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<title>供應商系統</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/x-icon" href="#" />
<link rel="stylesheet" href="/lib/layui/css/layui.css" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/lib/layui/layui.js"></script>
<script src="../js/js-web-city.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>表單集合演示</legend>
</fieldset>
<form class="layui-form">

    <div class="layui-form-item">
        <label class="layui-form-label">聯動選擇框</label>
        <div class="layui-input-inline">
            <select name="quiz1" lay-filter="province" id="js-select-provice"></select>
        </div>
        <div class="layui-input-inline">
            <select name="quiz2" lay-filter="city" id="js-select-city"></select>
        </div>
        <div class="layui-input-inline">
            <select name="quiz3" lay-filter="county" id="js-select-county"></select>
        </div>
        <div class="layui-input-inline">
            <select name="quiz3" lay-filter="street" id="js-select-street"></select>
        </div><div class="layui-input-inline">
            <select name="quiz3" id="js-select-village"></select>
        </div>
    </div>
</form>

</body>
</html>

5.2.完整js調用代碼

layui.use(['form'], function(){
    var form = layui.form,layer = layui.layer

    //監聽省份選擇
    form.on('select(province)', function(data){
       var selName = data.elem[data.elem.selectedIndex].text;
        getCity(data.value);
        form.render('select');//重新渲染下拉框
    });

    //監聽地市選擇
    form.on('select(city)', function(data){
        getCounty(data.value);
        form.render('select');//重新渲染下拉框
    });
    //監聽區縣選擇
    form.on('select(county)', function(data){
        getStreet(data.value);
        form.render('select');//重新渲染下拉框
    });
    //監聽鄉鎮選擇
    form.on('select(street)', function(data){
        getVillage(data.value);
        form.render('select');//重新渲染下拉框
    });

    //加載地市信息
    function getCity(provinceCode) {
        var areaData = queryArea(1,provinceCode);
        if(null == areaData) {
            return;
        }
        var resCode = areaData.code;
        if(resCode == '200') {
            $('#js-select-city').html('');
            $('#js-select-county').html('');
            $('#js-select-street').html('');
            $('#js-select-village').html('');
            var cityHtml = '<option value="" selected>請選擇</option>'
            $.each(areaData.data,function(index,val) {
                cityHtml += '<option value="'+val.areaCode+'">'+val.name+'</option>';
            })
            $('#js-select-city').append(cityHtml);
        }
    }

    //加載區縣信息
    function getCounty(cityCode) {
        var areaData = queryArea(2,cityCode);
        if(null == areaData) {
            return;
        }
        var resCode = areaData.code;
        if(resCode == '200') {
            $('#js-select-county').html('');
            $('#js-select-street').html('');
            $('#js-select-village').html('');
            var countyHtml = '<option value="" selected>請選擇</option>'
            $.each(areaData.data,function(index,val) {
                countyHtml += '<option value="'+val.areaCode+'">'+val.name+'</option>';
            })
            $('#js-select-county').append(countyHtml);
        }
    }

    //加載鄉鎮信息
    function getStreet(countyCode) {
        var areaData = queryArea(3,countyCode);
        if(null == areaData) {
            return;
        }
        var resCode = areaData.code;
        if(resCode == '200') {
            $('#js-select-street').html('');
            $('#js-select-village').html('');
            var streetHtml = '<option value="" selected>請選擇</option>'
            $.each(areaData.data,function(index,val) {
                streetHtml += '<option value="'+val.areaCode+'">'+val.name+'</option>';
            })
            $('#js-select-street').append(streetHtml);
        }
    }

    //加載街道信息
    function getVillage(streetCode) {
        var areaData = queryArea(4,streetCode);
        if(null == areaData) {
            return;
        }
        var resCode = areaData.code;
        if(resCode == '200') {
            $('#js-select-village').html('');
            var villageHtml = '<option value="" selected>請選擇</option>'
            $.each(areaData.data,function(index,val) {
                villageHtml += '<option value="'+val.areaCode+'">'+val.name+'</option>';
            })
            $('#js-select-village').append(villageHtml);
        }
    }
    
   $(function () {
       getProvince(0,0); //初始化加載省份信息
       form.render('select');//重新渲染下拉框
   });
});

function getProvince(level,code) {
   var areaData = queryArea(level,code);
   if(null == areaData) {
       return;
   }
   var resCode = areaData.code;
   if(resCode == '200') {
       var provicetHtml = '<option value="" selected>請選擇</option>'
       $.each(areaData.data,function(index,val) {
           provicetHtml += '<option value="'+val.areaCode+'">'+val.name+'</option>';
       })
       $('#js-select-provice').append(provicetHtml);
   }
}

/**
 * ajax查詢區域信息，如果要去返回值信息設置為同步，默認為異步調用
 * @param level
 * @param code
 * @returns {string}
 */
function queryArea(level,code) {
    var resData = '';
    $.ajax({
        url: '../test/queryArea',
        type: 'POST',
        dataType: 'JSON',
        async: false,
        data: {
            level: level,
            parentCode: code
        },
        success: function(res) {
            resData = res;
        },
        error: function(error) {

        }
    });
    return resData;
}

View Code

5.3.js代碼簡單梳理

首選根據級別編碼和區域編碼查詢后台公共方法，這里需要注意ajax異步調用無返回值得，需要設置為同步 async: false,

/**
 * ajax查詢區域信息，如果要去返回值信息設置為同步，默認為異步調用
 * @param level
 * @param code
 * @returns {string}
 */
function queryArea(level,code) {
    var resData = '';
    $.ajax({
        url: '../test/queryArea',
        type: 'POST',
        dataType: 'JSON',
        async: false,
        data: {
            level: level,
            parentCode: code
        },
        success: function(res) {
            resData = res;
        },
        error: function(error) {

        }
    });
    return resData;
}

頁面初始化加載所有省份信息

監聽選擇省份下拉框調用地市信息，選擇地市加載區縣依次類推即可

6.頁面展示效果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 request請求調用后台接口、后台數據的導入(一) vue中echarts基礎調用后台數據 layui 獲取后台數據 layui與后台數據交互實現分頁效果 Jquery 實現select 3級級聯查詢 Echarts 獲取后台數據使用后台數據展示柱形圖 mybatis的級聯查詢 Mybatis的級聯查詢 Oracle級聯查詢 mybatis級聯查詢