js
//通过首站 ajax查找二级站以及所属的变频器
function pumpFindSecond(obj){
if($(obj).val() != -2){
$.ajax({
url: 'firstStation.ajax',
data: "id=" + $(obj).val(),
success: function(data) {
if(data.seconds.length != 0){
var htm = [];
htm.push('<option value="-2">-请选择-</option>');
for(var i = 0; i < data.seconds.length; i++){
htm.push('<option value="');
htm.push(data.seconds[i].id);
htm.push('">');
htm.push(data.seconds[i].name);
htm.push('</option>');
}
$("#secondInfo").html(htm.join(""));
}else{
$("#secondInfo").html('<option value="-2">-无二级站-</option>');
alert("本首站下没有二级站!");
}
if(data.inverters.length !=0){
var htm1 = [];
htm1.push('<option value="-2">-请选择-</option>');
for(var j = 0;j<data.inverters.length;j++){
htm1.push('<option value="');
htm1.push(data.inverters[j].id);
htm1.push('">');
htm1.push(data.inverters[j].name);
htm1.push('</option>');
}
$("#deviceInfo").html(htm1.join(""));
}else{
$("#deviceInfo").html('<option value="-2">-无变频器-</option>');
alert("本首站下没有变频器!");
}
}
});
}else{
$("#secondInfo").html('<option value="-2">-请选择-</option>');
$("#deviceInfo").html('<option value="-2">-请选择-</option>');
}
}
//ajax二级站查找变频器
function pumpSecondDevice(obj){
$.ajax({
url: 'secondStation.ajax',
data: "id=" + $(obj).val(),
success: function(data) {
if(data.inverters.length != 0){
var htm = [];
for(var i = 0; i < data.inverters.length; i++){
htm.push('<option value="');
htm.push(data.inverters[i].id);
htm.push('">');
htm.push(data.inverters[i].name);
htm.push('</option>');
}
$("#deviceInfo").html(htm.join(""));
}else{
$("#deviceInfo").html('<option value="-2">-无变频器-</option>');
alert('本二级站下没有变频器');
}
}
});
}
页面
<span>
<label>首站名称:</label>
<form:select path="deviceInfo.firstStaInfo.id" id="firstInfo" onchange="pumpFindSecond(this)" >
<form:option value="-2">-请选择-</form:option>
<form:options itemValue="id" itemLabel="name" items="${firstStas }"/>
</form:select>
</span>
<span>
<label>二级站名称</label>
<form:select path="deviceInfo.secondStaInfo.id" id="secondInfo" onchange="pumpSecondDevice(this)">
<form:option value="-2">-请选择-</form:option>
<form:options itemValue="id" itemLabel="name" items="${seconds }"/>
</form:select>
</span>
<span>
<label>变频器</label>
<form:select path="deviceInfo.id" id="deviceInfo" >
<form:option value="-2">-请选择-</form:option>
<form:options itemValue="id" itemLabel="name" items="${inverters }"/>
</form:select>
</span>
controller
@RequestMapping("/list")
public ModelAndView list(@ModelAttribute("pumpInfo") PumpInfo pumpInfo,
Integer pageNo) throws BusinessException {
ModelAndView mav = new ModelAndView("pump/pumpInfolist");
// 查询所有的首站信息
List<FirstStaInfo> firstStas = firstStaInfoBO.selectAllFirstStaInfo();
// 查询条数
PageBean pb = new PageBean(pageNo, pumpInfoBO.selectPumpCount(pumpInfo));
// 分页查询
List<PumpInfo> pumps = pumpInfoBO.selectPumpListPage(pumpInfo, pb);
// 如果变频器选项不为空 并且变频器所属的首站id不为空 则查询二级站列表
if (pumpInfo.getDeviceInfo() != null
&& pumpInfo.getDeviceInfo().getFirstStaInfo()!= null
&& !pumpInfo.getDeviceInfo().getFirstStaInfo().getId()
.equals(Constants.CHECK_VALUE)) {
// 查询首站的基本信息
FirstStaInfo firstStaInfo = firstStaInfoBO
.selectFirstStaInfoById(pumpInfo.getDeviceInfo()
.getFirstStaInfo().getId());
// 获得首站下面的二级站列表
List<SecondStaInfo> seconds = firstStaInfo.getSecondList();
List<DeviceInfo> inverters = null;
// 如果变频器属于二级站 则查询二级站下的变频器列表
if (pumpInfo.getDeviceInfo().getSecondStaInfo().getId() != null
&& !pumpInfo.getDeviceInfo().getSecondStaInfo().getId()
.equals(Constants.CHECK_VALUE)) {
// 获得二级站的基本信息
SecondStaInfo s = secondStaInfoBO.selectSecondStaById(pumpInfo
.getDeviceInfo().getSecondStaInfo().getId());
inverters = s.getDeviceInfoList();
// 保存首站信息到变频器(因为变频器属于二级站 所以查询数据库没有首站的信息)
pumpInfo.getDeviceInfo().setFirstStaInfo(firstStaInfo);
} else {
// 获得首站的变频器
inverters = firstStaInfo.getDeviceInfoList();
}
mav.addObject("inverters", inverters);
mav.addObject("seconds", seconds);
}
mav.addObject("firstStas", firstStas);
mav.addObject("pumps", pumps);
mav.addObject("paging", pb);
return mav;
}
ajax
/**
* 通过首站查找二级站(还有只属于首站的变频器)
*
* @param id
* @return
*/
@RequestMapping("/firstStation.ajax")
public ModelAndView selectFirstStationByParam(@RequestParam("id") Integer id)
throws BusinessException {
ModelAndView mav = new ModelAndView();
FirstStaInfo first = firstStaInfoBO.selectFirstStaInfoById(id);
// 查询首站下的所有二级站
List<SecondStaInfo> seconds = first.getSecondList();
// 查询首站下的所有变频器
List<DeviceInfo> inverters = first.getInverterInfoList();
// 查询首站下的所有软启动器
List<DeviceInfo> softStarters = first.getSoftStarterInfoList();
mav.addObject("seconds", seconds);
mav.addObject("inverters", inverters);
mav.addObject("softStarters", softStarters);
return mav;
}
/**
* 通过二级站查找属于二级站的变频器
*
* @param id
* @return
*/
@RequestMapping("/secondStation.ajax")
public ModelAndView selectSecondStationByParam(
@RequestParam("id") Integer id) throws BusinessException {
ModelAndView mav = new ModelAndView();
SecondStaInfo seconds = secondStaInfoBO.selectSecondStaById(id);
// 查询二级站下的所有变频器
List<DeviceInfo> inverters = seconds.getInverterInfoList();
// 查询二级站下的所有软启动器
List<DeviceInfo> softStarters = seconds.getSoftStarterInfoList();
mav.addObject("inverters", inverters);
mav.addObject("softStarters", softStarters);
return mav;
}
分享到:
相关推荐
标题中提到的"级联菜单(二级级联 三级级联)"是指具有两个或三个级别的级联菜单结构。二级级联菜单意味着主菜单有一个子菜单,而三级级联菜单则在二级的基础上再增加一级子菜单。例如,一个网站的导航栏可能有"产品...
在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...
在JavaScript编程领域,"js树状地区三级级联带复选框"是一个常见的需求,尤其在构建具有地域选择功能的Web应用时。这个功能允许用户通过一个层级结构来选择国家、省份和城市,同时提供了复选框以支持多选。在本篇中...
省市县三级级联菜单省市县三级级联菜单省市县三级级联菜单
在网页开发中,城市三级级联通常用于实现省市区选择功能,这种功能可以让用户逐步选择他们的省份、城市和区县,以提供精确的地理位置信息。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...
在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"这个压缩包中,包含了实现这种级联选择的示例代码。 uni-app是一个多端统一的开发框架,它可以将同一份代码编译到iOS、Android、H5、小程序等...
在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 和 Prism 框架来实现ComboBox的省市县三级级联效果。WPF是.NET Framework的一部分,提供了丰富的用户界面(UI)设计工具,而Prism则是一个...
在这个案例中,我们探讨如何运用AJAX、JSP和Servlet技术来实现一个三级级联菜单。 **AJAX (Asynchronous JavaScript and XML)** 是一种在不刷新整个网页的情况下,与服务器交换数据并更新部分网页的技术。它通过...
标题中的“三级级联菜单(JS+HTML)”指的是在网页设计中使用JavaScript和HTML实现的具有三级结构的下拉菜单。这种菜单允许用户通过点击主菜单项来展开子菜单,进一步点击子菜单项可以展开更深层次的选项,提供了一种...
在本文中,我们将深入探讨如何使用AngularJS实现地区三级级联功能,这通常涉及到省、市、区的联动选择。AngularJS是一个强大的JavaScript框架,它提供了丰富的功能来构建动态单页应用(SPA)。在这个场景中,我们使用...
根据国家统计局发布的最新数据编辑,省市区三级级联,MySQL脚本,直接导入。
这种被称为“三级级联”的概念在Java Web开发中是一个常见需求,主要用于下拉列表联动选择,提升用户界面的交互性和数据输入的准确性。 在这个项目中,"Java三级级联,省份,市区,地区"意味着开发者正在创建一个...
一个简单html页面,实现省市的三级级联选择,根据不同情况可以控制不同展现。
在本案例中,我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件,它使得用户能够在下拉菜单中选择省份、城市以及区县,以实现快速筛选或输入数据的目的。 首先,jQuery是一个广泛使用的JavaScript库,它简化...
在网页设计中,三级级联菜单是一种常见的交互元素,它被广泛用于导航栏,帮助用户在多层级的分类中快速定位并选择目标。这个“三级级联菜单”可能是一个精心设计的实现,提供了优秀的用户体验,使得三层级别的信息...
最新的省市县(包含省会区域)三级级联JavaScript文件
三级级联数据
全国城市三级级联是一种常见的前端数据展示方式,尤其在下拉选择框中广泛使用,用于构建省市区三级联动的效果。这种功能通常出现在地址选择、物流配送等场景中,让用户能够方便地选择到精确的地区信息。在这个场景中...
这个“Ajax实现省市区三级级联Demo”是一个典型的前端与后端交互的实例,它展示了如何利用Ajax技术从MySQL数据库动态获取并显示省级、市级、区县级的数据,实现联动选择的效果。下面我们将详细探讨这一知识点。 ...
在本项目“JS完整城市三级级联”中,我们关注的是一个实现到县级单位的城市选择器,这样的功能常见于地址输入、物流配送等应用场景。这个级联选择器通常包括省、市、县三个级别,用户逐级选择,最终得到精确的地理...