場(chǎng)景

如下頁(yè)面編輯時(shí)：

在選擇歸屬機(jī)構(gòu)時(shí)會(huì)出現(xiàn)樹(shù)形結(jié)構(gòu)，所以在提交時(shí)需要額外提交一些信息，可以在form中使用input的隱藏域進(jìn)行存值。

實(shí)現(xiàn)

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}">添加架構(gòu)</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>架構(gòu)名稱(chēng)</label><input type="text" placeholder="請(qǐng)輸入架構(gòu)名稱(chēng)" 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>架構(gòu)排序</label><input type="number" placeholder="請(qǐng)輸入排序號(hào)碼" 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>架構(gòu)圖標(biāo)</label><input type="text" placeholder="請(qǐng)輸入圖標(biāo)信息" class="form-control" name= "icon"th:value="${sp==null?'':sp.icon}"/></div><div class="form-group col-md-4"><label>架構(gòu)編號(hào)</label><input type="text" placeholder="請(qǐng)輸入架構(gòu)編號(hào)" class="form-control" name= "num"th:value="${sp==null?'':sp.num}"/></div><div class="form-group col-md-4"><label>架構(gòu)分類(lèi)</label><select class="form-control m-b" name="orgClassify"><optionth:selected="${sp==null?true:0==sp.orgClassify ? true:false}" value="0">集團(tuán)</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">部門(mén)</option><optionth:selected="${sp==null?false:4==sp.orgClassify ? true:false}" value="4">崗位</option></select></div><div class="form-group col-md-4"><label>是否展開(kāi)</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">展開(kāi)</option></select></div><div class="form-group col-md-4"><label>是否是頂級(jí)</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>歸屬機(jī)構(gòu)</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="請(qǐng)選擇一項(xiàng)歸屬機(jī)構(gòu)" 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="請(qǐng)輸入備注" 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"/>

就是使用隱藏域來(lái)存取額外的值。

除了這兩個(gè)之外，其他屬性都與實(shí)體類(lèi)中屬性相對(duì)應(yīng)。

實(shí)體類(lèi)代碼

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;/*** 父類(lèi)id*/private Long pid;/*** 編號(hào)*/private String num;/*** 名稱(chēng)*/private String text;/*** 圖標(biāo)*/private String icon;/*** 分類(lèi)(0:集團(tuán)，1公司，2工廠，3部門(mén)，4崗位)*/private Integer orgClassify;/*** 節(jié)點(diǎn)狀態(tài)*/private Integer opened;/*** 失效狀態(tài)*/private Integer disabled;/*** 選中狀態(tài)*/private Integer selected;/*** 是否刪除*/@TableField(fill = FieldFill.INSERT)@TableLogicprivate Boolean isDelete;/*** 排序號(hào)*/private Long sortNum;/*** 創(chuàng)建時(shí)間*/private Date gmtCreat;/*** 修改時(shí)間*/private Date gmtModified;/*** 創(chuàng)建人*/private Long creator;/*** 修改人*/private Long modifier;/*** 備注*/private String remark;/*** 是否頂級(jí)*/private Integer isTopLevel;@Overrideprotected Serializable pkVal() {return this.id;}}

?

所以為了能提交這兩個(gè)額外的屬性，要重新建立一個(gè)擴(kuò)展實(shí)體類(lèi)并讓它繼承上面的實(shí)體類(lèi)。

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代碼

提交時(shí)操作：

$.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 ? "架構(gòu)編輯成功" : "sameLevel" == op ? "添加同級(jí)架構(gòu)成功" : "添加下級(jí)架構(gòu)成功",confirmButtonColor: "#1ab394",})}else{swal({type: 'error',title: '失敗提示:',text: "editAction" == op ? "架構(gòu)編輯失敗" : "sameLevel" == op ? "添加同級(jí)架構(gòu)失敗" : "添加下級(jí)架構(gòu)失敗",confirmButtonColor: "#1ab394",})}}).fail(function (err) {swal({type: 'fail',title: '異常提示:',text:? "editAction" == op ? "架構(gòu)編輯保存異常" : "sameLevel" == op ? "添加同級(jí)架構(gòu)保存異常" : "添加下級(jí)架構(gòu)保存異常",confirmButtonColor: "#1ab394",})});

?后臺(tái)接口方法

@Description("保存架構(gòu)數(shù)據(jù)")@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是封裝的返回?cái)?shù)據(jù)類(lèi):

package com.ws.sys.vo;import lombok.Data;import java.io.Serializable;@Data public class Json implements Serializable {//默認(rèn)未失敗狀態(tài)private static Json instance;private String msg = "接口訪問(wèn)失敗";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 = "接口訪問(wèn)成功";this.status = true;this.code = 200;this.data = data;return this;}public Json success(){this.title = "成功提示";this.msg = "接口訪問(wèn)成功";this.status = true;this.code = 200;this.data = null;return this;}public Json fail(Object data){this.title = "失敗提示";this.msg = "接口訪問(wèn)失敗";this.status = false;this.code = 300;this.data = data;return this;}public Json fail(){this.title = "失敗提示";this.msg = "接口訪問(wèn)失敗";this.status = false;this.code = 300;this.data = null;return this;} }

ResultDto是封裝的查詢結(jié)果類(lèi)：

package com.ws.sys.dto;import lombok.Data;import java.io.Serializable;@Data public class ResultDTO implements Serializable{//默認(rèn)未失敗狀態(tài)private static ResultDTO instance;private String msg = "數(shù)據(jù)返回失敗";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 = "數(shù)據(jù)返回成功";this.status = true;this.data = data;return this;}public ResultDTO success(){this.msg = "數(shù)據(jù)返回成功";this.status = true;this.data = null;return this;}public ResultDTO fail(Object data){this.msg = "數(shù)據(jù)返回失敗";this.status = false;this.data = data;return this;}public ResultDTO fail(){this.msg = "數(shù)據(jù)返回失敗";this.status = false;this.data = null;return this;}}

?

ServiceImpl代碼

@Overridepublic ResultDTO doAddSingleOrg(SysEnterpriseOrgVO sysEnterpriseOrg, String op) {// 獲取選定數(shù)據(jù),如果沒(méi)有則說(shuō)明該架構(gòu)已被刪除，提示前段架構(gòu)選擇錯(cuò)誤SysEnterpriseOrg sp = getById(sysEnterpriseOrg.getId());if(sp==null){return ResultDTO.getInst().fail("您選擇的架構(gòu)已被刪除");}else{// 設(shè)置公共參數(shù)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);//同級(jí)if("sameLevel".equals(op)){return doAddSameLevelorg(sysEnterpriseOrg, sp);}// 如果為下級(jí)，則else if("nextLevel".equals(op)){return doAddNextLevelOrg(sysEnterpriseOrg, sp);}else{// 執(zhí)行update操作return doEditOrg(sysEnterpriseOrg, sp);}}}

效果

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。