場景

如下頁面編輯時：

在選擇歸屬機構時會出現樹形結構，所以在提交時需要額外提交一些信息，可以在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">&times;</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)@TableLogicprivate Boolean isDelete;/*** 排序號*/private Long sortNum;/*** 創建時間*/private Date gmtCreat;/*** 修改時間*/private Date gmtModified;/*** 創建人*/private Long creator;/*** 修改人*/private Long modifier;/*** 備注*/private String remark;/*** 是否頂級*/private Integer isTopLevel;@Overrideprotected 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)@ResponseBodypublic 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代碼

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

效果

總結

以上是生活随笔為你收集整理的SpringBoot+jquery实现post提交表单并添加隐藏域属性完成编辑功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。