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

女爷i 2023-10-18 19:24 48阅读 0赞

## 场景 ##

如下页面编辑时：

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

在选择归属机构时会出现树形结构，所以在提交时需要额外提交一些信息，可以在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= "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>

注：

其中

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

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

### 实体类代码 ###

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);
            }
            }
        }

## 效果 ##

![Image 1][]![20190605133513687.gif][]

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