Springmvc+mybaties结合前端layui简单弹窗新增修改信息demo前后端代码

Contorller层代码,当修改信息时,需要初始化一次,所以要走写两个方法

		/**
	 * @param stationInfo
	 * @return 新增修改自动站气象信息
	 */
	@RequestMapping("XXX")
	@ResponseBody
	public BaseDataResult updateStationEquipmentInfo(@RequestBody StationEquipmentInfo stationEquipmentInfo) {
		Principal principal = getLoginAdminInfo();
		if (null == principal) {
			logger.info("--------------获取登录用户身份信息为空！");
			return new BaseDataResult(Constans.FAILED, "获取登录用户身份信息为空");
		}
		BaseDataResult result = equipmentInfoService.insertOrUpdate(stationEquipmentInfo);
		return result;
	}

	/**
	 * @param id
	 * @return 初始化站点气象信息
	 */
	@RequestMapping("xxx")
	@ResponseBody
	public BaseDataResult initEqDetail(Integer id) {
		Principal principal = getLoginAdminInfo();
		if (null == principal) {
			logger.info("--------------获取登录用户身份信息为空！");
			return new BaseDataResult(Constans.FAILED, "获取登录用户身份信息为空");
		}
		StationEquipmentInfo eqInfo = equipmentInfoService.getEqInfo(id);
		return new BaseDataResult(Constans.SUCCESS, "", eqInfo);
	}

实现方法

public BaseDataResult insertOrUpdate(StationEquipmentInfo stationEquipmentInfo) {
        String type="";
        int result=0;
        try {
            if(stationEquipmentInfo !=  null && stationEquipmentInfo.getId() ==null) {//新增站点气象信息
                //判断站点气象信息是否存在
                type="新增";
                result =stationEquipmentInfoMapper.insertSelective(stationEquipmentInfo) ;
            }else{
                type="修改";
                result =stationEquipmentInfoMapper.updateByPrimaryKeySelective(stationEquipmentInfo);
            }
            if(result>0) {
                return new BaseDataResult(Constans.SUCCESS, type+"站点气象信息成功");
            }
            return new BaseDataResult(Constans.FAILED, type+"站点气象信息失败");
            
        } catch (Exception e) {
            logger.info("--------------"+type+"站点信息异常-----！",e.getMessage());
            return new BaseDataResult(Constans.FAILED, type+"站点气象信息失败");
        }
        
    }
//修改完以后要从数据库更新一次
@Override
    public StationEquipmentInfo getEqInfo(Integer stationId) {
        StationEquipmentInfo info = new StationEquipmentInfo();
        info.setStationInfoId(stationId);
        return stationEquipmentInfoMapper.selectOne(info);
    }
``
做一个隐藏的<from弹框>

	<form <%-- action="${pageContext.request.contextPath}/xxx/xxx" --%>
		method="POST" id="adminForm" class="layui-form"  >
		<div class="changePage1 layer-page "
			style="display: none; color: #333; overflow: scroll-y;height:260px;">
			<!-- 气象id -->
			<input class="id" name="id" type="hidden" value="">
			<input class="stationInfoId" name="stationInfoId" type="hidden" value="">
			<div class="layer-page-form-input">
				<label for="" class="layer-label">机箱号</label> <input  class="caseNo"
					name="caseNo" type="text" placeholder="请输入机箱号">
			</div>
			<div class="layer-page-form-input">
				<label for="" class="layer-label">风向风速</label> <input class="windSpeed" 
					name="windSpeed" type="text" placeholder="请输入风向风速">
			</div>
			<div class="layer-page-form-input">
				<i class="color-r">*</i>温馨提示：请确保填写信息无误！
			</div>
		</div>
	</form>

在table中做一个点击选项,点击后弹出弹框,传入该条数据的id
```<td>	<a class="changeClick layui-icon iconfont icon-qixiang" title="修改站点气象信息"  onClick="updateStationEquipment('${station.id }') "></a></td>

对应的js

var IN,UI;    // IN 当前dialog索引
var dat;     // 判断新增站点气象信息和修改站点气象信息的依据
var form;
layui.use(['form'],function() {
	form = layui.form;
	// 添加或者修改
	form.on('submit(demoAjax1)', function(data){
		updateStationEquipmentInfo(dat);
	});
	
})
/**
 * @author wilson
 *初始化站点气象信息
 */
function initEqDetaioll(stationInfoId){
	var data={"id":stationInfoId};
	$.ajax(
	{
		// 方法所在页面和方法名
		dataType : "json",
		data : data,
		async:	false,
		url : "initEqDetail",
		success : function(data) {
			var eq=data.data;
		
			if(data.code == 1){ //成功
				if(eq == null){    //新增
					$(".id").val("");
					$(".stationInfoId").val("");
					$(".caseNo").val("");
				}else{   //修改
					$(".id").val(eq.id);
					$(".stationInfoId").val(eq.stationInfoId);
					$(".caseNo").val(eq.caseNo);
				}
			}else{
				layer.msg(data.error);
			}
		}
  });
}
/**
 * @param operationType
 * @param id
 * @returns
 * 增加修改站点气象信息弹窗
 */
updateStationEquipment=function (stationInfoId) {
	timedRefresh = false;
	var that = this;
	initEqDetaioll(stationInfoId);
	
	var id = $(".id").val();
	dat={id:id}
	if(id == ""){  // 新增
		$(".caseNo").val("");
		$(".windSpeed").val("");
		$(".tempHumidity").val("");
		$(".conspicurity").val("");
		layer.open({
			type : 1,
			resize : false,
			title : '站点信息气象新增',
			btn : [ '确定', '取消' ],
			area : [ '670px' ],
			offset : '80px',
			content : $('.changePage1'),
			yes : function(index) {
				IN=index;
				dat = {stationInfoId:stationInfoId};
			},
			cancel: function(){ 
			    //关闭弹窗,改变其值
				timedRefresh = true;
			  } ,
			btn2: function(index, layero){
				//取消弹窗,改变其值
				timedRefresh = true;
			}
		})
	}else{   // 修改
		layer.open({
			type : 1,
			resize : false,
			title : '站点气象信息修改',
			btn : [ '确定', '取消' ],
			area : [ '670px' ],
			offset : '80px',
			content : $('.changePage1'),
			yes : function(index) {
				IN=index;
				dat = {id:id,stationInfoId:stationInfoId};
			},
			cancel: function(){ 
			    //关闭弹窗,改变其值
				timedRefresh = true;
			  } ,
			btn2: function(index, layero){
				//取消弹窗,改变其值
				timedRefresh = true;
			}
		})
	}
	$("a.layui-layer-btn0").attr("lay-submit","").attr("lay-filter","demoAjax1")
};
/**
 * 新增修改站点气象信息逻辑
 * 
 * */
updateStationEquipmentInfo=function (dat) {
	timedRefresh = false;
	var id = $(".id").val();
	var stationInfoId= dat.stationInfoId;
	
	if(id ==	""){
		id="";  //通过id是否为空判断是添加还是修改
	}
	var stationInfoId = stationInfoId;
	var caseNo = $(".caseNo").val();
	var windSpeed = $(".windSpeed").val();
	var tempHumidity = $(".tempHumidity").val();
	var conspicurity = $(".conspicurity").val();
	var url = "updateStationEq";
	var data = {
			"id":id,
			"stationInfoId":stationInfoId,
			"caseNo":caseNo,	
			"windSpeed" : windSpeed,
			"tempHumidity" : tempHumidity,
			"conspicurity" : conspicurity,
	};
	$.ajax({
		type : "Post",
		// 方法所在页面和方法名
		contentType : "application/json; charset=utf-8",
		dataType : "json",
		data : JSON.stringify(data),
		url : url,
		success : function(data) {
			if(data.code == 0){
			    return layer.msg(data.error);
			  }else{   //成功
				  layer.closeAll();
				  layer.msg(data.error, {icon: 1});
				  setTimeout(function(){
						$("#form").submit();
				  },500);
			  }
		}
	});
}

效果图如下