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

骑猪看日落 2023-10-18 11:48 11阅读 0赞

### 场景 ###

当我们点击页面的某个按钮去执行某个业务时，需要弹出一个dialog窗口，然后再点击提交或者保存，提及

给后台action，后台回显结果。

### 效果 ###

点击某个按钮

![20181126172728389.jpg][]![Image 1][]

弹出窗口dialog

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]![Image 1][]

点击提交按钮回显消息

![Image 1][]![20181126172735108.jpg][]

### 实现 ###

#### 点击按钮页面 ####

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

[20181126172728389.jpg]: https://img-blog.csdnimg.cn/20181126172728389.jpg
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181126172732450.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20181126172735108.jpg]: https://img-blog.csdnimg.cn/20181126172735108.jpg