当前位置： 移动技术网 > IT编程>开发语言>Java > 基于layUI调用后台数据实现区域信息级联查询

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

2019年08月23日  | 移动技术网IT编程  | 我要评论

 基于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.脚本文件下载地址

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
        }
    ]
}

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;
}

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网