SSM+BJUI实现添加和编辑共用一个页面

柔情只为你懂 2023-10-18 11:18 19阅读 0赞

### 场景 ###

SSM+BJUI在对记录进行添加或者编辑时可以共用一个jsp页面，然后再进行保存。

### 实现 ###

1.主页面添加两个按钮，一个是添加按钮一个是编辑按钮。

<shiro:hasPermission name="partnerAdd">
          <a href="${ctx}/sys/cooperativePartnersManageAction/toAdd" class="btn btn-green" data-icon="plus" data-toggle="dialog" data-width="800" data-height="400" data-id="dialog-user" data-mask="true">添加</a>
          </shiro:hasPermission>
          
          <shiro:hasPermission name="partnerEdit">< BR>     <ahref="${ctx}/sys/cooperativePartnersManageAction/toEdit?id={#bjui-selected}" class="btn btn-blue" data-icon="edit" data-toggle="dialog" data-width="800" data-height="400" data-id="dialog-user" data-mask="true">编辑</a>
     </shiro:hasPermission>

三个页面：

![Image 1][]![20181115090927707.jpg][]

partnerMain就是当前主页面，带有添加以及编辑的页面。

![Image 1][]![20181115090931520.jpg][]

partnerEditDlg是添加和编辑共用的页面。

#### 添加功能实现 ####

1.现在点击添加按钮，来到对应的action

@RequestMapping(value="/toAdd")
     public ModelAndView toAdd(){
      ModelAndView mv = null;
      try {
    
        //业务部分代码省略
        //传递当前的操作类型的标识，左边是op常量参数，表示操作类型，右边是add常量参数，表示是添加操作
       mv.addObject(ModelAndViewConstants.OPERATION_KEY,ModelAndViewConstants.OPERATION_VALUE_ADD);
       //传递到共用页面的标题参数，左边是title常量参数，右边是要显示的标题的内容
       mv.addObject(ModelAndViewConstants.TITLE_KEY, "添加合作商户信息");
       //跳转的具体的页面
       mv.setViewName(ModelAndViewConstants.PARTNER_EDIT_VIEW);
       LogService.getInstance(this).error("进入合作伙伴添加功能成功：" +ModelAndViewConstants.PARTNER_EDIT_VIEW);
      }
      catch(Exception ex) {
       LogService.getInstance(this).error("进入合作伙伴添加失败：" + ex.getMessage(), ex);
       mv = new ModelAndView("redirect:/error.jsp");
      }
      return mv;
     }

2.通过上面的action可以传递要执行的操作类型为add，并跳转到共用的页面。

<c:set var="ctx" value="${pageContext.request.contextPath}" />
    <div class="bjui-pageContent">
     <form action="${ctx}/sys/cooperativePartnersManageAction/doSave" class="pageForm"
      data-toggle="validate"  autocomplete="off">
      <input type="hidden" name="op" id="j_dialog_op"
       value="${param.op}${op}">
      <input type="hidden" name="id"
       id="j_dialog_id" value="${partner.id}">
      <c:if test="${!empty role}">
       <input type="hidden" name="status" id="j_dialog_op"
        value="${partner.status}">
      </c:if>
    
      <table class="table table-condensed table-hover">
       <tbody>
        <tr>
         <td colspan="2" align="center" valign="middle"><h4>${title}</h4></td>
        </tr>
        <tr>
         <td>
         <label for="name" class="control-label x90">合作方名称：</label>
         <input class="" id="partnerName" type="text" name="partnerName" data-rule="required;"
           autocomplete="off" value="${partner.partnerName}" />
         </td>
         <td>
         <label class="control-label x90">合作方公司名称：</label>
                <input class="" id="companyName" type="text" name="companyName" data-rule="required;"
           autocomplete="off" value="${partner.companyName}" />
         </td>
        </tr>
        
       </tbody>
      </table>
     </form>
    </div>
    <script>
    
    </script>
    <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>

主要功能点;

在共享页面添加隐藏input，来接受传过来的op参数，即操作类型，这里是add

因为是添加所以传过来的实体类partner没有ID等属性，但是要在编辑要用到，所以这里也添加一个hidden。

这里只显示一个字段，其他的省略。

3.点击保存时，BJUI会提交当前form，此form会提交到:$\{ctx\}/sys/cooperativePartnersManageAction/doSave，然后执行保存的操作。

@ResponseBody
     @RequestMapping(value="/doSave")
     public Map<String, Object> doSave(SysPartners entity, String op) {
      Map<String, Object> jsonResult = null;
      try {
       //正式业务部分开始
       //与配置权限管理中相对应，实现添加或编辑完实时更新
       String tabid = tabid(ModelAndViewConstants.PARTNER_SYS_ID);
       //如果是测试签约
       if(entity.getContractStatus()==0) {
        entity.setTestContractTime(new Date());
        entity.setContractStatusName("测试签约");
       }
       //如果是正式签约
       if(entity.getContractStatus()==1) {
        entity.setFormalContractTime(new Date());
        entity.setContractStatusName("正式签约");
       }
       entity.setRecordTime(new Date());
       //获得当前用户的id和name，加入客户对象中
       ShiroUser currentUser = (ShiroUser)SecurityUtils.getSubject().getPrincipal();
       entity.setModifyUserId(currentUser.getUserId());
       entity.setModifyUserName(currentUser.getAccount());
       //正式业务部分结束
       //如果op标志参数为空，或者为add 那么就执行添加操作
       if (null == op || ModelAndViewConstants.OPERATION_VALUE_ADD.equals(op)) {
        //此字段表示数据未被更改
        entity.setStatus("0");
        //执行插入数据操作，方法是有代码生成工具自动生成
        int count = this.sysPartnersService.insert(entity);
        if (count > 0) {
         LogService.getInstance(this).debug("添加客户信息成功!");
        }
       }
       else {
        //如果不是，则就是编辑后的保存操作
        //获取现存数据，也是通过代码生成工具生成的方法
        SysPartners currentSysPartner = this.sysPartnersService.getByPrimaryKey(entity);
        int count = this.sysPartnersService.updateByPrimaryKey(entity);
        if (count > 0) {
         LogService.getInstance(this).debug("编辑合作商户信息成功!");
        }
       }
       Integer statusCode = 200;
       String msg = "合作商户信息保存成功";
       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;
     }

#### 编辑功能实现 ####

1.现在点击主页面的编辑按钮

<shiro:hasPermission name="customerEdit">
          <a href="${ctx}/sys/sysCustomerAction/toEdit?id={#bjui-selected}" class="btn btn-blue" data-icon="edit" data-toggle="dialog" data-width="800" data-height="400" data-id="dialog-user" data-mask="true">编辑</a>
          </shiro:hasPermission>

2.点击编辑按钮会跳到后台action，并将当前BJUI集成的能获取选中项的ID传过去。

现在来到后台的toEdit

@RequestMapping(value="/toEdit")
     public ModelAndView toEdit(Integer id) {
      ModelAndView mv = null;
      try {
       //根据ID先查询要编辑的数据
       SysPartners partner = this.sysPartnersService.getByPrimaryKey(id);
       //业务部分代码开始
       //获取签约状态，此处是通过关联码表来实现
       Map<String, Object> param = new HashMap<String, Object>();
       //0 表示正常数据
       param.put("status", "0");
       param.put("codeType", "contractStatus");
       //根据参数将相关码表内容查询出来
       List<SysCode> contractStatus = codeService.getByParam(param);
       mv = new ModelAndView();
       //传递签约状态
       mv.addObject("contractStatus", contractStatus);
       //业务部分代码结束
       //传递操作类型，这里是编辑操作
       mv.addObject(ModelAndViewConstants.OPERATION_KEY,ModelAndViewConstants.OPERATION_VALUE_EDIT);
       //jsp页面要显示的标题title
       mv.addObject(ModelAndViewConstants.TITLE_KEY, "修改合作商户信息");
       //将查询到的实体Model类传递
       mv.addObject(ModelAndViewConstants.PARTMER, partner);
       //跳转到编辑界面
       mv.setViewName(ModelAndViewConstants.PARTNER_EDIT_VIEW);
      }
      catch(Exception ex) {
       LogService.getInstance(this).error("进入客户编辑失败：" + ex.getMessage(), ex);
       mv = new ModelAndView(ModelAndViewConstants.ERROR_VIEW);
      }
      return mv;
     }

关键点：

通过传过来的ID获取要编辑的Model实体类的数据，然后执行相应的业务，

关键是通过：

mv.addObject(ModelAndViewConstants.OPERATION\_KEY,ModelAndViewConstants.OPERATION\_VALUE\_EDIT);

来传递操作类型，左边是常量参数op,右边是常量参数edit。

然后传递要显示的标题，传递获取的model数据，跳转到共用的编辑页面。

3.剩余操作与添加功能一样，不过是编辑时将数据传递过去，通过input的value来赋值，如果是添加时value为空所以不显示，如果是编辑则会将传递的数据进行显示，添加与编辑都是执行同一个save方法。

###     ###

[Image 1]: 
[20181115090927707.jpg]: https://img-blog.csdnimg.cn/20181115090927707.jpg
[20181115090931520.jpg]: https://img-blog.csdnimg.cn/20181115090931520.jpg