三级级联 跨级级联（小谭 版）

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;
	}