~whychwj/haha.git

			@@ -46,28 +46,38 @@
			<div class="whyc-page-layui-content-container">
			<div class="whyc-page-layui-content" style="background-color: pink">
			<div class="tbl-container">
			<div class="tbl-filter" lay-filter="tblFilter">
			<div class="layui-form layui-form-pane">
			<div class="tbl-filter">
			<div class="layui-form layui-form-pane" lay-filter="tblFilter">
			<div class="layui-inline">
			<div class="layui-input-inline">
			<select name="province" id="province">
			<option value="">请选择省/直辖市</option>
			</select>
			<div class="layui-form" lay-filter="provinceFilter">
			<select name="province" id="province" lay-filter="province">
			<option value="">请选择省/直辖市</option>
			</select>
			</div>
			</div>
			<div class="layui-input-inline">
			<select name="city" id="city" lay-filter="city">
			<option value="">请选择市/区</option>
			</select>
			<div class="layui-form" lay-filter="cityFilter">
			<select name="city" id="city" lay-filter="city">
			<option value="">请选择市/区</option>
			</select>
			</div>
			</div>
			<div class="layui-input-inline">
			<select name="home" id="home" lay-search="">
			<option value="">请选择机房</option>
			</select>
			<div class="layui-form" lay-filter="homeFilter">
			<select name="home" id="home" lay-search="" lay-filter="home">
			<option value="">请选择机房</option>
			</select>
			</div>

			</div>
			<div class="layui-input-inline">
			<select name="group" lay-filter="group" lay-search="" id="group">
			<option value="">请选择电池组</option>
			</select>
			<div class="layui-form" lay-filter="groupFilter">
			<select name="group" id="group" lay-filter="group" lay-search="">
			<option value="">请选择电池组</option>
			</select>
			</div>

			</div>
			</div>
			<button class="layui-btn layui-btn-sm layui-btn-normal" id="search"><i class="fa fa-search"></i> 查询</button>
			@@ -133,14 +143,6 @@
			table.reload('groupTbl', tOptions);
			});

			// 切换筛选条件模块
			form.on('select(group)', function(data) {
			var dom = data.elem;
			var $dom = $(dom);
			console.log($dom.find('option:selected').data());
			});


			// 点击表格工具栏更换
			table.on('tool(groupTbl)', function(obj) {
			var event = obj.event;
			@@ -156,9 +158,9 @@

			}

			// 查询省下拉框
			searchProvince();

			// 查询省的列表
			// 查询省
			function searchProvince() {
			// 请求后台查询
			$.ajax({
			@@ -168,10 +170,218 @@
			data: null,
			dataType: 'json',
			success:function(result) {
			var rs = result.result;
			var rs = JSON.parse(result.result);
			var list = []; // option结果集
			var ele = $('#province'); // 目标select
			if(rs.code == 1) {
			var data = rs.data;
			list.push(getLayuiSelect('请选择省/直辖市', '', {}, {}));
			// 遍历查询结果
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _tmp = getLayuiSelect(_data, _data, {}, {});
			list.push(_tmp);
			}
			}else {
			list.push(getLayuiSelect('暂无省/直辖市', '', {}, {}));
			}

			// 根据对象数组生成下拉列表
			createLayuiSelect(ele, list);
			form.render('select', 'provinceFilter');

			// 查询市
			searchCity();
			}
			});
			}

			// 切换省-市
			form.on('select(province)', function(data) {
			// 查询市
			searchCity();
			});

			// 查询市
			function searchCity() {
			// 构造查询条件
			var tmp = {
			StationName1: $("#province").val()
			};
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			async: true,
			url: 'BattInfAction!serchStationName2',
			dataType: 'json',
			data: "json = "+JSON.stringify(tmp),
			success: function(result) {
			var rs = JSON.parse(result.result);
			var list = []; // option结果集
			var ele = $('#city'); // 目标select
			if(rs.code == 1) {
			var data = rs.data;
			list.push(getLayuiSelect('请选择市/区', '', {}, {}));
			// 遍历查询结果
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _tmp = getLayuiSelect(_data.StationName2, _data.StationName2, {}, _data);
			list.push(_tmp);
			}
			}else {
			list.push(getLayuiSelect('暂无市/区', '', {}, {}));
			}

			// 根据对象数组生成下拉列表
			createLayuiSelect(ele, list);
			form.render('select', 'cityFilter');

			// 查询机房
			searchHome();
			}
			});
			}

			// 切换市-机房
			form.on('select(city)', function(data) {
			// 查询机房
			searchHome();
			});

			// 查询机房
			function searchHome() {
			// 构造查询条件
			var tmp = {
			StationName1:$("#province").val(),
			StationName2:$("#city").val()
			};
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			async: true,
			url: 'BattInfAction!serchStationName3',
			dataType: 'json',
			data: "json = "+JSON.stringify(tmp),
			success: function(result) {
			var rs = JSON.parse(result.result);
			var list = []; // option结果集
			var ele = $('#home'); // 目标select
			if(rs.code == 1) {
			var data = rs.data;
			list.push(getLayuiSelect('请选择机房', '', {StationId: ''}, {}));
			// 遍历查询结果
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _attr = {
			StationId: _data.StationId
			};
			var _tmp = getLayuiSelect(_data.StationName3, _data.StationName, _attr, _data);
			list.push(_tmp);
			}
			}else {
			list.push(getLayuiSelect('暂无机房', '', {}, {}));
			}

			// 根据对象数组生成下拉列表
			createLayuiSelect(ele, list);
			form.render('select', 'homeFilter');

			// 查询机房
			searchGroup();
			}
			});
			}

			// 切换机房-电池组
			form.on('select(home)', function(data) {
			// 查询电池组
			searchGroup();
			});

			// 查询机房
			function searchGroup() {
			// 构造查询条件
			var tmp = {
			StationName1:$("#province").val(),
			StationName2:$("#city").val(),
			StationName: $("#home").val(),
			StationId: $("#home").find('option:selected').attr('stationid')
			};
			// 根据构造条件查询内容
			$.ajax({
			type: 'post',
			async: true,
			url: 'BattInfAction!serchBattByStation',
			dataType: 'json',
			data: "json = "+JSON.stringify(tmp),
			success: function(result) {
			var rs = JSON.parse(result.result);
			var list = []; // option结果集
			var ele = $('#group'); // 目标select
			if(rs.code == 1) {
			var data = rs.data;
			list.push(getLayuiSelect('请选择电池组', '0', {}, {}));
			// 遍历查询结果
			for(var i=0; i<data.length; i++) {
			var _data = data[i];
			var _attr = {
			stationname: _data.StationName,
			dev_id: _data.FBSDeviceId,
			batt_num: _data.GroupIndexInFBSDevice+1
			};
			var txt = _data.BattGroupName+'(共'+_data.MonCount+"<s:text name='Section'/>"+')';
			var _tmp = getLayuiSelect(txt, _data.BattGroupId, _attr, _data);
			list.push(_tmp);
			}
			}else {
			list.push(getLayuiSelect('暂无机房', '', {}, {}));
			}

			// 根据对象数组生成下拉列表
			createLayuiSelect(ele, list);
			form.render('select', 'groupFilter');
			}
			});
			}

			// 生成特定的select列表
			function createLayuiSelect(ele, list) {
			// 清空内容
			ele.text('');
			// 遍历list结果集生成下拉
			for(var i=0; i<list.length; i++) {
			var _list = list[i];
			var option = $('<option></option>'); // option元素
			// 设置option的文本/属性值/data值
			option.text(_list.txt);
			option.val(_list.val);
			option.data('data', _list.data);
			Object.keys(_list.attr).forEach(function(key){
			var val = _list.attr[key];
			option.attr(key, val);
			});
			ele.append(option);
			}
			}

			// 构造生成select列表的对象数组
			function getLayuiSelect(txt, val, attr, data) {
			var obj = {
			val: '',
			txt: '',
			attr: {},
			data: {}
			};

			// 设置内容的值
			obj.val = val; // option的value值
			obj.txt = txt; // option的文本值
			obj.attr = attr; // option的自定义的属性
			obj.data = data; // option的data值

			// 返回构造的对象
			return obj;
			}
			});
			</script>
			</body>