基于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

        }

    ]

}

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

基于layUI调用后台数据实现区域信息级联查询的更多相关文章

  1. 基于Ajax提交formdata数据、错误信息展示和局部钩子、全局钩子的校验。

    formdata重点: 实例化FormData这个类 循环serializeArray可以节省代码量 图片要用$('#id')[0].files[0]来获得 加上contentType:false和p ...

  2. layui表单使用开关滑块和复选框，渲染后台数据方法

    提示:整个表格要在form标签内 定义开关模板 <div class="layui-form" lay-filter="layuiadmin-app-form-li ...

  3. [开源] 基于Layui组件封装的后台模版，HG-Layui-UI通用后台管理框架V1.0版

    HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...

  4. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  5. thinkjs学习-this.assign传递数据和ajax调用后台接口

    在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...

  6. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  7. js前台与后台数据交互-后台调前台（后台调用、注册客户端脚本）

    转自:http://blog.csdn.net/wang379275614/article/details/17049721 客户端脚本一般都在前台,这里讲的是(1)在后台调用前台定义的脚本(2)在后 ...

  8. MVC4中AJAX Html页面打开调用后台方法实现动态载入数据库中的数据

    之前一直用window.onload方法来调用js方法来实现,今天纠结能不能换个方法实现. 非常明显是能够的. 在html前台页面引用js代码例如以下 @Scripts.Render("~/ ...

  9. 基于layui的框架模版，采用模块化设计，接口分离，组件化思想

    代码地址如下:http://www.demodashi.com/demo/13362.html 1. 准备工作 编辑器vscode,需要安装liveServer插件在前端开启静态服务器 或者使用hbu ...

随机推荐

  1. Lexicographical Substring Search SPOJ - SUBLEX （后缀自动机）

    Lexicographical Substrings Search \[ Time Limit: 149 ms \quad Memory Limit: 1572864 kB \] 题意 给出一个字符串 ...

  2. gevent.queue

    目录 Gevent gevent基础之阻塞,非阻塞 同步,异步概念 同步异步与阻塞,非阻塞区别 Queue python内置Queue介绍 Gevent gevent基础之阻塞,非阻塞 1.geven ...

  3. Hibernate的级联保存、级联删除

    级联操作: 属性:cascade 值:save-update(级联保存) delete(级联删除) all(级联保存+级联删除) 优点:虽然,不用级联操作也能解决问题.但是级联操作可以减少代码量,使得 ...

  4. access us

    Ubuntu下设置 chrome的SwitchyOmega Wiki (简体中文)wiki Linux安装配置客户端及开机自动启动 运维 安装 配置 搭建服务以及配置多用户 安装和配置 一键搭建 服务 ...

  5. 洛谷/SPOJ SP3267 题解

    若想要深入学习主席树,传送门. Description: 给定数列 \(\{a_n\}\) ,求闭区间 \([l,r]\) 的互异的个数. Method: 扫描序列建立可持续化线段树,若此元素是第一次 ...

  6. linux grep 查询多行的方法

    linux grep 查询多行的方法 经常查询 git log 中使用的方法, 如下 git log |grep "xxxx" 如果想查询多行的话, 就有些尴尬, 如果想查询多行的 ...

  7. js 判断一个数是否在数组中

    ,,,,,,,); ; ; i < arr.length; i++) { ){ console.log(i); flag=; break; } } ){ console.log("66 ...

  8. JQuery的Ajax标准写法

    Ajax的标准写法 $.ajax({ url:"http://www.xxx",//请求的url地址 dataType:"json",//返回的格式为json ...

  9. Codeforces 828F Best Edge Weight - 随机堆 - 树差分 - Kruskal - 倍增算法

    You are given a connected weighted graph with n vertices and m edges. The graph doesn't contain loop ...

  10. IntelliJ IDEA 快捷键终极大全，速度收藏！

    ​阅读本文大概需要 6 分钟. ▌自动代码 常用的有 fori/sout/psvm+Tab 即可生成循环.System.out.main 方法等 boilerplate 样板代码 . 例如要输入 fo ...