效果图:
自己可以添加内容;
引用:amazeui前端框架:
<link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/amazeui.min.css"/>
<script src="/tc_vsmp/view/assets/js/utils/amazeui.min.js"></script>
弹出页面:
<!-- start modal -->
<div class="am-modal am-modal-prompt form-am-modal" tabindex="-1" id="handle-form-modal-credit">
<div class="am-modal-dialog">
<div class="am-modal-hd">XXX</div>
<div class="am-modal-bd">
<form class="am-form am-form-horizontal" id="handle-form-credit">
<div class="am-form-group">
<label class="am-u-sm-3 am-form-label">XXX</label>
<div class="am-u-sm-9">
<input type="hidden" name="id" id="loanApplyId" value="">
<input type="text" id="table-item-operator" name="operator" value="${loginUser}" class="am-modal-prompt-input" readonly>
</div>
</div>
<div class="am-form-group">
<label class="am-u-sm-3 am-form-label">XXX</label>
<div class="am-u-sm-9">
<input type="text" name="apply_amount" id="creditApplyAmount1" class="am-modal-prompt-input" placeholder="XXXXXX">
</div>
</div>
<div class="am-form-group">
<label class="am-u-sm-3 am-form-label">XXX</label>
<div class="am-u-sm-9">
<select data-am-selected id="table-item-capital-source" name="capital_source">
<option value="0">XXX</option>
<option value="1">XXX</option>
<option value="2">XXX</option>
<option value="3">XXX</option>
<option value="4">XXX</option>
<option value="5">XXX</option>
</select>
</div>
</div>
</form>
</div>
<div class="am-modal-footer">
<span class="am-modal-btn" data-am-modal-cancel>取消</span>
<span class="am-modal-btn" data-am-modal-confirm>提交</span>
</div>
</div>
</div><!-- end modal-->
触发按钮:
<a href="javascript:void(0);" class="am-btn am-btn-primary handle-btn" onclick="creditApplyAmount('{{= lat_id}}')"><span class="am-icon-archive"></span> 授信额度 </a>
js:
//按钮触发
function creditApplyAmount(id) {
//页面处理按钮的提交
$('#handle-form-modal-credit').modal({
relatedTarget: this,
closeViaDimmer:false,//点击遮罩层时关闭 Modal
closeOnConfirm:false,//点击确认时不关闭窗口
onConfirm: function(e) {
var apply_amount = $("#creditApplyAmount1").val();
var capital_source = $("#table-item-capital-source").val();
$.ajax({
type:"POST",
// contentType:"application/json", //WebService 会返回Json类型
url:basePath+"credit/updateLoanApplyCredit",
data:
{"id":id,"apply_amount":apply_amount,"capital_source":capital_source},
dataType:"json",
success:function(data){
if(data==1){
$('#handle-form-modal-credit').modal('close');
$("#creditApplyAmount1").val("");
$("#table-item-capital-source option[value='0']
").attr("selected",true);
alert("成功!");
//刷新页面
commitAjax({'url':getDataUrl(),
'param':getQueryCondition()});
}else{
alert("失败!");
}
},
error:function(){
alert("异常");
}
});
},
onCancel: function(e) {
var apply_amount = $("#creditApplyAmount1").val("");
$("#table-item-capital-source option[value='0'] ").attr("selected",true);
//alert('你取消提交了!');
}
});
}
后端代码:
/**
* xxxxx
* @param loanApply
* @param request
* @return
*/
@RequestMapping("/updateLoanApplyCredit")
@ResponseBody
public Integer updateLoanApplyCredit(
LoanApply loanApply,
HttpServletRequest request)
{
Integer a = 0;
try {
a = service.updateLoanApplyAmount(loanApply);
BaseController.saveLog(
SecurityUtils.getSubject().getPrincipals().toString(),
DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
BaseController.getRequestIp(request), "xxxxx",
"xxxxxxx", 1, 1, "");
}
catch (Exception e)
{
BaseController.saveLog(
SecurityUtils.getSubject().getPrincipals().toString(),
DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
BaseController.getRequestIp(request), "xxxxx",
"xxxxxxx, 0, 1, "");
}
return a;
}