基于layUI调用后台数据实现区域信息级联查询

最新推荐文章于 2023-06-20 10:23:40 发布

diexun4203

最新推荐文章于 2023-06-20 10:23:40 发布

阅读量510

点赞数

原文链接：http://www.cnblogs.com/sunny1009/p/11401546.html

版权

基于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.页面展示效果

转载于:https://www.cnblogs.com/sunny1009/p/11401546.html

diexun4203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于layUI调用后台数据实现区域信息级联查询

基于layUI调用后台数据实现区域信息级联查询1.基本思路后台提供根据区域编码查询区域列表公共接口页面初始化调用后台接口加载所有省份点击省份将省份区域编码传入后台查询该省份下所有地市信息，以此类推2.数据表结构展示SELECT COLUMN_NAME 列名, DATA_TYPE 字段类型, CHARACTER_MAXIM...
复制链接

扫一扫