基于layUI调用后台数据实现区域信息级联查询
程序员文章站
2022-06-21 20:01:33
基于layUI调用后台数据实现区域信息级联查询 1.基本思路 后台提供根据区域编码查询区域列表公共接口 页面初始化调用后台接口加载所有省份 点击省份将省份区域编码传入后台查询该省份下所有地市信息,以此类推 2.数据表结构展示 3.数据详解 3.1.查看所有省份数据 3.2.根据省份编码查询地市编码 ......
基于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.页面展示效果