记一次使用layui完成省市县镇四级联动

朱雀 2021-09-21 08:54 428阅读 0赞

因项目需求进行根据区域统计,所以需要省市县镇四级联动.话不多说,上代码

1html部分

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<script src="../js/echarts.js"></script>
    </head>
    
    <body>
    
    <div class="windowinfo">
    	<div class="breadcrumb">
    		
    		
    	</div>
    	
    	<div class="layui-form">
    		
    		<div class="layui-form-item layui-input-block">
    			<label class="layui-form-label">选择统计日期方式</label>
    			<div class="layui-input-inline">
    				<select name="riqi" id="riqi">
    					<option value="1">天</option>
    					<option value="2">周</option>
    					<option value="3">月</option>
    					<option value="4">年</option>
    				</select>
    			</div>
    
    			
    			<label class="layui-form-label">选择统计地点：</label>
    			<div class="layui-input-inline">
    				<select name="companyId" lay-verify="required" lay-filter="companyId" id="companyId" lay-search>
    					<option value="">请选择省份</option>
    				</select>
    			</div>
    			<div class="layui-input-inline">
    				<select name="departmentId" lay-verify="required" lay-filter="departmentId" id="departmentId" lay-search>
    					<option value="">请选择市</option>
    				</select>
    			</div>
    			<div class="layui-input-inline">
    				<select name="departmentSecondId" lay-verify="required" lay-filter="departmentSecondId" id="departmentSecondId" lay-search>
    					<option value="">请选择县</option>
    				</select>
    			</div>
    			<div class="layui-input-inline">
    				<select name="departmentFourId" lay-verify="required" lay-filter="departmentFourId" id="departmentFourId" lay-search>
    					<option value="">请选择镇/街道</option>
    				</select>
    			</div>
    
    			<button type="button" class="layui-btn" data-type="reload" id="search">统计</button>
    			<button type="reset" class="layui-btn">重置</button>
    
    			
    		</div>
    	</div>
    </div>
    
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/layui/layui.all.js"></script>
    <script src="js/list_region.js"></script>
    </body>
    </html>

2js部分==也就是html上面的js/list\_region.js

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    
    // 指定图表的配置项和数据
    var option = {
    	title: {
    		text: '第一个 ECharts 实例'
    	},
    	tooltip: {},
    	legend: {
    		data:['销量']
    	},
    	xAxis: {
    		data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    	},
    	yAxis: {},
    	series: [{
    		name: '销量',
    		type: 'bar',
    		data: [5, 20, 36, 10, 10, 20]
    	}]
    };
    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
    
    
    
    
    //=========================================layui四级联动=start==============================
    layui.use(['element', 'form'], function () {
    	var element = layui.element,
    		form = layui.form;
    	//======================1级菜单===================
    	$(function () {
    		$.ajax({
    			async: false,
    			type: "POST",
    			url: "/userErp/torder/getAddressByCity.do?cityType=1&cityNameF=''", //统计机柜地址
    			success: function (result) {
    				// console.log(result);
    				var list = result.data;
    				var s = '<option value="">请选择省份</option>';
    				$.each(list, function (i, company) {
    					// console.log(company);
    					s = s + '<option value="' + company + '">' + company + '</option>';
    				});
    				$("#companyId").html(s);
    				form.render('select');
    
    			}
    		});
    	});
    	//======================2级菜单===================
    	form.on('select(companyId)', function (data) {
    		var companyId = data.value;
    		var s = '<option value="">请选择市</option>';
    		if (companyId == '') {
    			$("#departmentId").html(s);
    			form.render('select');
    		} else {
    			$.ajax({
    				async: false,
    				type: "POST", //提交方式
    				url: "/userErp/torder/getAddressByCity.do?cityType=2&cityNameF="+companyId,//路径
    				data: {
    					companyId: companyId
    				},
    				success: function (result) {
    					var list = result.data;
    					// console.log(result);
    					$.each(list, function (i, department) {
    						s = s + '<option value="' + department + '">' + department + '</option>';
    					});
    					$("#departmentId").html(s);
    					form.render('select');
    				}
    			});
    		}
    	});
    
    	//======================3级菜单===================
    	form.on('select(departmentId)', function (data) {
    		var departmentId = data.value;
    		var s = '<option value="">请选择县</option>';
    		if (departmentId == '') {
    			$("#departmentSecondId").html(s);
    			form.render('select');
    		} else {
    			$.ajax({
    				async: false,
    				type: "POST", //提交方式
    				url: "/userErp/torder/getAddressByCity.do?cityType=3&cityNameF="+departmentId,//路径
    				data: {
    					companyId: departmentId
    				},
    				success: function (result) {
    					var list = result.data;
    					// console.log(result);
    					$.each(list, function (i, department) {
    						s = s + '<option value="' + department + '">' + department + '</option>';
    					});
    					$("#departmentSecondId").html(s);
    					form.render('select');
    				}
    			});
    		}
    	});
    
    	//======================4级菜单===================
    	form.on('select(departmentSecondId)', function (data) {
    		var departmentSecondId = data.value;
    		var s = '<option value="">请选择镇/街道</option>';
    		if (departmentSecondId == '') {
    			$("#departmentFourId").html(s);
    			form.render('select');
    		} else {
    			$.ajax({
    				async: false,
    				type: "POST", //提交方式
    				url: "/userErp/torder/getAddressByCity.do?cityType=4&cityNameF="+departmentSecondId,//路径
    				data: {
    					companyId: departmentSecondId
    				},
    				success: function (result) {
    					var list = result.data;
    					// console.log(result);
    					$.each(list, function (i, department) {
    						s = s + '<option value="' + department + '">' + department + '</option>';
    					});
    					$("#departmentFourId").html(s);
    					form.render('select');
    				}
    			});
    		}
    	});
    })
    //=========================================layui四级联动=end==============================

3java后台请求部分

@RequestMapping("/getAddressByCity.do")
        @ResponseBody
        public ServerResponse getAddressByCity(String cityType,String cityNameF) {
            List<String> listCity = new ArrayList<>();
            if(cityType != null && "1".equals(cityType)){//1级菜单
                listCity = WeixinCrmMerchantPhoneService.getAddressByCity1();
            }else if(cityType != null && "2".equals(cityType) && cityNameF != null && !"".equals(cityNameF)){ //根据名称查询2级菜单
                listCity = WeixinCrmMerchantPhoneService.getAddressByCity2(cityNameF);
            }else if(cityType != null && "3".equals(cityType) && cityNameF != null && !"".equals(cityNameF)){ //根据名称查询2级菜单
                listCity = WeixinCrmMerchantPhoneService.getAddressByCity3(cityNameF);
            }else if(cityType != null && "4".equals(cityType) && cityNameF != null && !"".equals(cityNameF)){ //根据名称查询2级菜单
                listCity = WeixinCrmMerchantPhoneService.getAddressByCity4(cityNameF);
            }
            return ServerResponse.createBySuccess(listCity);
        }

注意:1这里只是返回一个list<string> 所以前端js获取的部分也是list,因为我需要的value和name都是相同的,如果有不一样的可以使用map或者其它

2:这里的echarts没有整理完毕,只是做一个初步的使用,可以先略过.只看四级联动部分