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

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

1html部分

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="../js/echarts.js"></script>
</head>

<body>

<div class="windowinfo">
	<div class="breadcrumb">
		<!--运维管理 >区域使用统计-->
		<!--<a href="javascript:;">区域使用统计</a>-->
	</div>
	<!--layui-form start-->
	<div class="layui-form">
		<!--layui-form-item start-->
		<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>

			<!--<button type="button" class="layui-btn" lay-submit lay-filter="search">查询</button>-->
		</div>
	</div>
</div>

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<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没有整理完毕,只是做一个初步的使用,可以先略过.只看四级联动部分

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值