場景

當我們點擊頁面的某個按鈕去執行某個業務時，需要彈出一個dialog窗口，然后再點擊提交或者保存，提及

給后臺action，后臺回顯結果。

效果

點擊某個按鈕

彈出窗口dialog

點擊提交按鈕回顯消息

實現

點擊按鈕頁面

<label for="name" class="control-label x90">銷賬：</label>?<button type="button" class="btn btn-default"data-toggle="dialog"data-options="{id:'toRecharge',url:'${ctx}/sys/cooperativePartnersManageAction/toWriteOff',type:'post',data:{id:${partner.id}}}"data-width="300" data-height="200"data-id="dialog-user-role"data-title="${partner.partnerName}銷賬">銷賬</button>

注：data-toggle要設置為dialog；

data-options中設置后臺提交的action的url,以及要提交的參數等；

data-width="300" data-height="200"設置彈窗的寬度和高度；

data-title設置彈窗的標題；

后臺action

@RequestMapping(value="/toWriteOff")public ModelAndView toWriteOff(Integer id) {ModelAndView mv = null;try {mv = new ModelAndView();mv.addObject("partnerId", id);SysPartners sysPartner = sysPartnersService.getByPrimaryKey(id);//傳遞對象，防止對象錯誤mv.addObject("partnerName", sysPartner.getPartnerName());mv.setViewName(ModelAndViewConstants.PARTNER_WRITEOFF_VIEW);LogService.getInstance(this).debug("獲取銷賬數據成功："+ModelAndViewConstants.PARTNER_WRITEOFF_VIEW);}catch(Exception ex) {LogService.getInstance(this).error("獲取銷賬數據失敗：" + ex.getMessage(), ex);mv = new ModelAndView(ModelAndViewConstants.ERROR_VIEW);}return mv;}

此action作用是獲取要銷賬的對象并傳遞過去，執行跳轉的jsp頁面，也就是下面的彈窗。

彈窗jsp頁面

<div class="bjui-pageContent" style="background: #FFF;"><form id="WriteOffRecordForm" action="${ctx}/sys/cooperativePartnersManageAction/doWriteOff"data-toggle="validate"?enctype="multipart/form-data"><input type="hidden" name="partnerId" id="partnerId" value="${partnerId }"><input type="hidden" name="status" id="status" value="${dataResult.status}"><table class="table table-condensed table-hover"><tbody><tr style="height: 30px;"><td><label for="partnerName" class="control-label x90">銷賬對象：</label><label for="partnerName" class="control-label x90">${partnerName}</label></td></tr><tr style="height: 30px;"><td><label for="name" class="control-label x90">確定要銷賬嗎？</label></td></tr></table></form> </div> <div class="bjui-pageFooter"><ul><li><button type="button" class="btn-close" data-icon="close">關閉</button></li><li><button type="submit" class="btn-default" data-icon="save" >銷賬</button></li></ul> </div>

彈窗點擊提交后的action

@ResponseBody@RequestMapping(value="/doWriteOff")public Map<String, Object> doWriteOff(Integer partnerId) {Map<String, Object> jsonResult = null;try {//與配置權限管理中相對應，實現添加或編輯完實時更新String tabid = tabid(ModelAndViewConstants.PARTNER_SYS_ID);String msg = "銷賬成功";int result;SysPartners sysPartner = sysPartnersService.getByPrimaryKey(partnerId);if(sysPartner.getCurrentAdvanceMoney().compareTo(new BigDecimal("0.00"))==0 ) {msg="此用戶當前預付款為0";}else {result =passPartnersBillseriaService.doWriteOff(partnerId,sysPartner);msg = "銷賬成功";}Integer statusCode = 200;jsonResult = JsonResult.jsonReturn(statusCode, msg, tabid);}catch(Exception ex) {LogService.getInstance(this).error("銷賬失敗：" + ex.getMessage(), ex);String msg =? "銷賬失敗：" + ex.getMessage();jsonResult = JsonResult.jsonReturnErr(msg);}return jsonResult;}

?

?

?

?

?

總結

以上是生活随笔為你收集整理的BJUI实现点击按钮弹窗，提交到后台action后回显数据流程整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。