SpringBoot+jquery实现post提交表单并添加隐藏域属性完成编辑功能

场景

如下页面编辑时：

在选择归属机构时会出现树形结构，所以在提交时需要额外提交一些信息，可以在form中使用input的隐藏域进行存值。

实现

html代码

<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg" id="addDiv" th:fragment="addDiv">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <i class="fa fa-plus-circle modal-icon pl-1p75"></i>
                    <h4 class="modal-title" th:text="${orgAddTitle}">添加架构</h4>
                    <small><span th:text="${orgAddName}"></span></small>
                </div>
                <form id="orgAdd"  role="form" action="">
                    <div class="modal-body">
                        <div class="form-row">
                            <input type="hidden" class="form-control" name= "id"th:value="${sp==null?'':sp.id}"/>
                            <input type="hidden" class="form-control" name="op" th:value="${op}"/>
                           <!-- <input type="hidden" class="form-control" name= "orgLevel"th:value="${sp==null?'':sp.orgLevel}"/>-->
                            <input type="hidden" class="form-control" name= "pid"th:value="${sp==null?'':sp.pid}"/>
                            <div class="form-group col-md-4">
                                <label>架构名称</label>
                                <input type="text" placeholder="请输入架构名称" class="form-control" name= "text"th:value="${sp==null?'':sp.text}"/>
                            </div>
                            <div class="form-group col-md-4" th:if="${sp} ne null">
                                <label>架构排序</label>
                                <input type="number" placeholder="请输入排序号码" class="form-control" name= "sortNum"onkeyup="this.value= this.value.replace(/\D/g,'')"onafterpaste="this.value= this.value.replace(/\D/g,'')"th:value="${sp==null?'':sp.sortNum}"/>
                            </div>
                            <div class="form-group col-md-4">
                                <label>架构图标</label>
                                <input type="text" placeholder="请输入图标信息" class="form-control" name= "icon"th:value="${sp==null?'':sp.icon}"/>
                            </div>
                            <div class="form-group col-md-4">
                                <label>架构编号</label>
                                <input type="text" placeholder="请输入架构编号" class="form-control" name= "num"th:value="${sp==null?'':sp.num}"/>
                            </div>
                            <div class="form-group col-md-4"><label>架构分类</label>
                                <select class="form-control m-b" name="orgClassify">
                                   <optionth:selected="${sp==null?true:0==sp.orgClassify ? true:false}" value="0">集团</option>
                                   <optionth:selected="${sp==null?false:1==sp.orgClassify ? true:false}" value="1">公司</option>
                                   <optionth:selected="${sp==null?false:2==sp.orgClassify ? true:false}" value="2">工厂</option>
                                   <optionth:selected="${sp==null?false:3==sp.orgClassify ? true:false}" value="3">部门</option>
                                   <optionth:selected="${sp==null?false:4==sp.orgClassify ? true:false}" value="4">岗位</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4"><label>是否展开</label>
                                <select class="form-control m-b" name="opened">
                                   <optionth:selected="${sp==null?true:0==sp.opened ? true:false}"value="0">折叠</option>
                                   <optionth:selected="${sp==null?true:1==sp.opened ? true:false}" value="1">展开</option>
                                </select>
                            </div>

                            <div class="form-group col-md-4"><label>是否是顶级</label>
                                <select class="form-control m-b" name="isTopLevel" id="isTopLevel">
                                   <optionth:selected="${sp==null?true:1==sp.isTopLevel ? true:false}"value="1">是</option>
                                   <optionth:selected="${sp==null?true:0==sp.isTopLevel ? true:false}" value="0">否</option>
                                </select>
                            </div>
                            <div class= "form-groupcol-md-4"th:if="${sp!=null && sp.isTopLevel==0}">
                                <label>归属机构</label>
                                <input id="belong_org_id" type="hidden" name="belongOrgId"/>
                                <input id="belong_org_ids" type="hidden" name="belongOrgIds"/>
                                <input id="belong_org_des" type="text" readonly placeholder="请选择一项归属机构" class="form-control" name= "belongOrgDes"th:value="${rm==null || rm.sysRole ==null?'':rm.sysRole.remark}"/>
                                <div id="belong_org_jstree">
                            </div>
                            <div class="form-group col-md-4">
                                <label>备注</label>
                                <textarea  rows="4" placeholder="请输入备注" class="form-control" name= "remark"th:text="${sp==null?'':sp.remark}"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

注：

其中

<input id="belong_org_id" type="hidden" name="belongOrgId"/>
<input id="belong_org_ids" type="hidden" name="belongOrgIds"/>

就是使用隐藏域来存取额外的值。

除了这两个之外，其他属性都与实体类中属性相对应。

实体类代码

package com.ws.sys.entity;

import com.baomidou.mybatisplus.annotation.*;
import com.baomidou.mybatisplus.extension.activerecord.Model;
import java.util.Date;
import java.io.Serializable;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
public class SysEnterpriseOrg extends Model<SysEnterpriseOrg> {

    private static final long serialVersionUID = 1L;

    /**
     * 主键id
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    /**
     * 父类id
     */
    private Long pid;

    /**
     * 编号
     */
    private String num;

    /**
     * 名称
     */
    private String text;

    /**
     * 图标
     */
    private String icon;

    /**
     * 分类(0:集团，1公司，2工厂，3部门，4岗位)
     */
    private Integer orgClassify;

    /**
     * 节点状态
     */
    private Integer opened;

    /**
     * 失效状态
     */
    private Integer disabled;

    /**
     * 选中状态
     */
    private Integer selected;

    /**
     * 是否删除
     */
    @TableField(fill = FieldFill.INSERT)
    @TableLogic
    private Boolean isDelete;

    /**
     * 排序号
     */
    private Long sortNum;

    /**
     * 创建时间
     */
    private Date gmtCreat;

    /**
     * 修改时间
     */
    private Date gmtModified;

    /**
     * 创建人
     */
    private Long creator;

    /**
     * 修改人
     */
    private Long modifier;

    /**
     * 备注
     */
    private String remark;

    /**
     * 是否顶级
     */
    private Integer isTopLevel;


    @Override
    protected Serializable pkVal() {
        return this.id;
    }

}

所以为了能提交这两个额外的属性，要重新建立一个扩展实体类并让它继承上面的实体类。

package com.ws.sys.vo.enterpriseOrgVO;

import com.ws.sys.entity.SysEnterpriseOrg;
import lombok.Data;

@Data
public class SysEnterpriseOrgVO extends SysEnterpriseOrg {
    private Long belongOrgId;
    private Long belongOrgIds[];

}

JS代码

提交时操作：

$.post("/sysEnterpriseOrg/doAddSingleOrg.do",$("#orgAdd").serialize()).done(function (res) {
                if(res.status){
                    $("#orgAddModel").modal('hide');
                    $('#org_tree').data('jstree', false).empty();
                    initJsTree();
                    swal({
                        type: 'success',
                        title: '成功提示:',
                        text: "editAction" == op ? "架构编辑成功" : "sameLevel" == op ? "添加同级架构成功" : "添加下级架构成功",
                        confirmButtonColor: "#1ab394",
                    })
                }else{
                    swal({
                        type: 'error',
                        title: '失败提示:',
                        text: "editAction" == op ? "架构编辑失败" : "sameLevel" == op ? "添加同级架构失败" : "添加下级架构失败",
                        confirmButtonColor: "#1ab394",
                    })
                }
            }).fail(function (err) {
                swal({
                    type: 'fail',
                    title: '异常提示:',
                    text:  "editAction" == op ? "架构编辑保存异常" : "sameLevel" == op ? "添加同级架构保存异常" : "添加下级架构保存异常",
                    confirmButtonColor: "#1ab394",
                })
            });

 后台接口方法

@Description("保存架构数据")
    @RequestMapping(value = "/doAddSingleOrg.do", method = RequestMethod.POST)
    @ResponseBody
    public Json doAddSingleOrg(SysEnterpriseOrgVO sysEnterpriseOrg, String op){
        try {
            ResultDTO resultDTO = this.mSysEnterpriseOrgService.doAddSingleOrg(sysEnterpriseOrg,op);
            return Json.getInst().success(resultDTO.getData());
        } catch (Exception e) {
            return Json.getInst().fail();
        }
    }

其中Json是封装的返回数据类:

package com.ws.sys.vo;

import lombok.Data;

import java.io.Serializable;

@Data
public class Json implements Serializable {
    //默认未失败状态
    private static Json instance;
    private String msg = "接口访问失败";
    private String title = "失败提示";
    private boolean status = false;
    private int code = 300;
    private Object data = null;

    public synchronized static Json getInst() {
        if(instance==null){
            instance = new Json();
        }
        return instance;
    }

    public Json() {
        super();
    }

    public Json success(Object data){
        this.title = "成功提示";
        this.msg = "接口访问成功";
        this.status = true;
        this.code = 200;
        this.data = data;
        return this;
    }

    public Json success(){
        this.title = "成功提示";
        this.msg = "接口访问成功";
        this.status = true;
        this.code = 200;
        this.data = null;
        return this;
    }

    public Json fail(Object data){
        this.title = "失败提示";
        this.msg = "接口访问失败";
        this.status = false;
        this.code = 300;
        this.data = data;
        return this;
    }

    public Json fail(){
        this.title = "失败提示";
        this.msg = "接口访问失败";
        this.status = false;
        this.code = 300;
        this.data = null;
        return this;
    }
}

ResultDto是封装的查询结果类：

package com.ws.sys.dto;


import lombok.Data;

import java.io.Serializable;

@Data
public class ResultDTO implements Serializable{

    //默认未失败状态
    private static ResultDTO instance;
    private String msg = "数据返回失败";
    private boolean status = false;
    private Object data = null;

    public synchronized static ResultDTO getInst() {
        if(instance==null){
            instance = new ResultDTO();
        }
        return instance;
    }

    public ResultDTO() {
        super();
    }

    public ResultDTO success(Object data){
        this.msg = "数据返回成功";
        this.status = true;
        this.data = data;
        return this;
    }

    public ResultDTO success(){
        this.msg = "数据返回成功";
        this.status = true;
        this.data = null;
        return this;
    }

    public ResultDTO fail(Object data){
        this.msg = "数据返回失败";
        this.status = false;
        this.data = data;
        return this;
    }

    public ResultDTO fail(){
        this.msg = "数据返回失败";
        this.status = false;
        this.data = null;
        return this;
    }

}

ServiceImpl代码

@Override
    public ResultDTO doAddSingleOrg(SysEnterpriseOrgVO sysEnterpriseOrg, String op) {
        // 获取选定数据,如果没有则说明该架构已被删除，提示前段架构选择错误
        SysEnterpriseOrg sp = getById(sysEnterpriseOrg.getId());
        if(sp==null){
            return ResultDTO.getInst().fail("您选择的架构已被删除");
        }else{
        // 设置公共参数
        sysEnterpriseOrg.setPid("#".equals(sysEnterpriseOrg.getPid())?null:sysEnterpriseOrg.getPid());
        sysEnterpriseOrg.setIsDelete(false);
        sysEnterpriseOrg.setCreator(ShiroHelper.getUser().getUserId());
        sysEnterpriseOrg.setGmtCreat(new Date());
        sysEnterpriseOrg.setModifier(ShiroHelper.getUser().getUserId());
        sysEnterpriseOrg.setGmtModified(new Date());
        sysEnterpriseOrg.setDisabled(0);
        sysEnterpriseOrg.setSelected(0);
        //同级
        if("sameLevel".equals(op)){
            return doAddSameLevelorg(sysEnterpriseOrg, sp);
        }
        // 如果为下级，则
        else if("nextLevel".equals(op)){
            return doAddNextLevelOrg(sysEnterpriseOrg, sp);
        }
        else{
            // 执行update操作
            return doEditOrg(sysEnterpriseOrg, sp);
        }
        }
    }

效果