BJUI实现点击按钮弹窗，提交到后台action后回显数据流程整理

场景

当我们点击页面的某个按钮去执行某个业务时，需要弹出一个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;
 }