當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
SpringBoot+Jquery+Jstree实现企业架构管理
生活随笔
收集整理的這篇文章主要介紹了
SpringBoot+Jquery+Jstree实现企业架构管理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
SpringBoot+Jquery+jsTree實現頁面樹型結構：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897251
SpringBoot+jquery實現post提交表單并添加隱藏域屬性完成編輯功能：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90900901
參照上面實現的效果上，只闡述思路。
實現
數據庫設計
對應實體類
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;@Overrideprotected Serializable pkVal() {return this.id;}}注：這里使用的是MybatisPlus所以實體類沒有對應的set和get方法。
點擊菜單顯示樹形結構實現
1.點擊左邊的菜單按鈕，會顯示樹形結構以及點擊樹形結構后右邊顯示詳情。
2.數據庫中架構管理，不存在刪除架構，使用的是邏輯刪除，即不使用這個部門則將這個部門禁用。
再次啟用時再將這個部門啟用。所以樹形結構的顯示在頁面上有個顯示條件。顯示啟用的還是顯示全部的 。
3.顯示樹形結構的位置是一個div,<div id="org_tree"></div>
html頁面代碼
??
? <div class="row"><div class="col-lg-12"><div class="ibox "><div class="ibox-title"><h5>架構管理頁面</h5><div class="col-sm-2"><div class="form-group"><label class="col-form-label" for="IsOpened">顯示范圍</label><select class="form-control" id="IsOpened" name="IsOpened" ><option value="1">只顯示已啟用</option><option value="2">顯示全部</option></select></div></div><button class="btn btn-info " type="button" onclick="orgSearch()"><i class="fa fa-refresh"></i>搜索</button></div><div class="ibox-content"><div class="row"><div class="col-lg-3"><h5>架構管理</h5><div id="org_tree"></div></div><div class="col-lg-9"><ul class="sortable-list connectList agile-list ui-sortable"><li class="success-element ui-sortable-handle "><h5>架構詳情</h5><P><button class="btn btn-info " type="button" data-toggle="modal" onclick="orgAdd()"><i class="fa fa-save"></i> 新增</button><button class="btn btn-info " type="button" onclick="orgEdit()"><i class="fa fa-paste"></i> 編輯</button><button class="btn btn-info " type="button" onclick="validateIsOpen()"><i class="fa fa-trash-o"></i>啟用</button><button class="btn btn-info " type="button" onclick="validateIsClose()"><i class="fa fa-trash-o"></i>禁用</button><button class="btn btn-info " type="button" onclick="orgRefresh()"><i class="fa fa-refresh"></i> 刷新</button></P><div class="project-list"><table class="table table-hover" id="orgDetailDisplay"><tbody><tr><td class="project-status w-10"><span class="label label-primary">架構編號</span></td><td class="project-title"><span id="num">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">架構名稱</span></td><td class="project-title"><span id="text">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">架構圖標</span></td><td class="project-title"><span id="icon">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">分類</span></td><td class="project-title"><span id="orgClassify">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否啟用</span></td><td class="project-title"><span id="isDelete">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否失效</span></td><td class="project-title"><span id="disabled">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否選中</span></td><td class="project-title"><span id="selected">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">是否頂級</span></td><td class="project-title"><span id="isTopLevel">--</span></td></tr><tr><td class="project-status w-10"><span class="label label-primary">備注</span></td><td class="project-title"><span id="remark">--</span></td></tr></tbody></table></div></li></ul></div></div></div></div></div></div>jquery部分代碼
$(document).ready(function() {//初始化數據initJsTree(); });function initJsTree(IsOpened) {if(IsOpened==undefined){/*如果是首次進入則默認查全部的*/IsOpened=2;}var url = "/sysEnterpriseOrg/doListOrgRecursion.do";var select_id = Cookies.get("select_id");var data = {selectedId:select_id,IsOpened:IsOpened};$.post(url,data).done(function (res) {if(res.status){$('#org_tree').data('jstree', false).empty();$('#org_tree').jstree({'core':{'data': res.data,"multiple" : false, // 單選}}).on("ready.jstree", function (e, data) { // jstree節點加載完成后調用的監聽函數var inst = data.instance;console.log(inst)var obj = inst.get_node(e.target.firstChild.firstChild.lastChild);console.log(obj)if(typeof(select_id) == "undefined"){select_id = obj.id;}var jsonData = {"id" : select_id};setTimeout(function () {$.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",jsonData).done(function (res) {if(res.status){$("#num").text(res.data.num);$("#text").text(res.data.text);$("#icon").html('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+res.data.icon);switch(res.data.orgClassify){case 0:$("#orgClassify").text("集團");break;case 1:$("#orgClassify").text("公司");break;case 2:$("#orgClassify").text("工廠");break;case 3:$("#orgClassify").text("部門");break;case 4:$("#orgClassify").text("崗位");break;default:$("#orgClassify").text("未知分類");}$("#isDelete").text(false==res.data.isDelete?"是":"否");$("#disabled").text(1==res.data.disabled?"是":"否");$("#selected").text(1==res.data.selected?"是":"否");$("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");$("#remark").text(res.data.remark);data.instance.refresh();}}).fail(function (err) {alert("數據加載失敗，請重新嘗試！");});},200);}).on("activate_node.jstree", function (e, data) { // 獲取當前活動狀態節點（獲取當前被點擊的節點）Cookies.set("select_id",data.node.id);var data = {"id" : data.node.id};$.post("/sysEnterpriseOrg/doGetSingleOrgDetails.do",data).done(function (res) {if(res.status){$("#num").text(res.data.num);$("#text").text(res.data.text);$("#icon").html('<i class="'+res.data.icon+' modal-icon pr-1"></i>'+res.data.icon);switch(res.data.orgClassify){case 0:$("#orgClassify").text("集團");break;case 1:$("#orgClassify").text("公司");break;case 2:$("#orgClassify").text("工廠");break;case 3:$("#orgClassify").text("部門");break;case 4:$("#orgClassify").text("崗位");break;default:$("#orgClassify").text("未知分類");}//$("#opened").text(1==res.data.opened?"是":"否");$("#isDelete").text(false==res.data.isDelete?"是":"否");$("#disabled").text(1==res.data.disabled?"是":"否");$("#selected").text(1==res.data.selected?"是":"否");$("#isTopLevel").text(1==res.data.isTopLevel?"是":"否");$("#remark").text(res.data.remark);data.instance.refresh();}}).fail(function (err) {alert("數據加載失敗，請重新嘗試！");});})}else{swal({type: 'error',title: '錯誤提示',text: '接口訪問異常，請聯系管理員！'})}}).fail(function (err) {swal({type: 'error',title: '錯誤提示',text: '權限數據加載失敗，請重新嘗試！'})}); }后臺Controller方法
?
@Description("獲取企業組織架構列表頁")@RequestMapping("/org.html")public String doGetListForOrg(){return "enterpriseOrg/org";}@Description("獲取架構樹形結構")@RequestMapping(value = "/doListOrgRecursion.do", method = RequestMethod.POST)@ResponseBodypublic Json doListOrgJsTree(String selectedId,String IsOpened){try {ResultDTO resultDTO = this.mSysEnterpriseOrgService.doListOrgJsTree(selectedId,IsOpened);return Json.getInst().success(resultDTO.getData());} catch (Exception e) {Log.getInst(this).debug("架構Tree",e);return Json.getInst().fail();}}@Description("獲取架構詳情接口")@ResponseBody@RequestMapping(value = "/doGetSingleOrgDetails.do", method = RequestMethod.POST)public Json doGetSingleOrgDetails(String id){try {ResultDTO resultDTO = this.mSysEnterpriseOrgService.doGetSingleOrgDetails(id);return Json.getInst().success(resultDTO.getData());} catch (Exception e) {return Json.getInst().fail();}}其中獲取樹形結構數據的方法的實現類
?@Overridepublic ResultDTO doListOrgJsTree(String selectedId,String IsOpened) {if(StringUtils.isBlank(selectedId)||selectedId.equals("undefined")) {IPage<SysEnterpriseOrg> sysEnterpriseOrgIPage? = page(new Page<SysEnterpriseOrg>(0, 1), new QueryWrapper<SysEnterpriseOrg>().eq("is_delete", Constants.IS_NOT_DELETE));if (!(sysEnterpriseOrgIPage.getRecords() != null && !sysEnterpriseOrgIPage.getRecords().isEmpty()))return ResultDTO.getInst().fail();selectedId = sysEnterpriseOrgIPage.getRecords().get(0).getId().toString();}List<TreeJsonVO> treeVOList = new ArrayList<TreeJsonVO>();//查詢啟用的if(IsOpened.trim().equals("1")){treeVOList= this.baseMapper.listOrgJsTreeOpened(selectedId);}//查詢全部的else if(IsOpened.trim().equals("2")){treeVOList= this.baseMapper.listOrgJsTree(selectedId);}else{//為空則查詢啟用的treeVOList= this.baseMapper.listOrgJsTreeOpened(selectedId);}return ResultDTO.getInst().success(treeVOList);}獲取屬性結構詳情的實現類
@Overridepublic ResultDTO doGetSingleOrgDetails(String id) {SysEnterpriseOrg sysEnterpriseOrg =baseMapper.selectById(new Long(id));return? ResultDTO.getInst().success(sysEnterpriseOrg);}新增與編輯實現
1.編輯時獲取選中的id然后查詢并在頁面展示。
2.重新選擇歸屬結構時獲取選中的id并將其設置為上面編輯的pid(父級id)。
3.編輯前要進行驗證選中的架構是否是禁用的架構，如果是禁用的則不能進行編輯和添加同級和下級架構。
4.添加同級架構則將選中的id的數據的pid作為新增的記錄的pid,添加下級架構則將當前選中的id作為新增的記錄的pid。
效果
?
添加與編輯使用同一個模態框彈出顯示。
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>Jquery中代碼
// 編輯操作 function orgEdit() {//獲取選中的記錄的idvar ref = $('#org_tree').jstree(true),sel = ref.get_selected();sel = sel[0];//驗證是否是禁用的架構var url = '/sysEnterpriseOrg/validateIsOpened.do';var data = {"id":sel};$.post(url,data).done(function (res) {if(res.status==false){//彈窗提示信息Swal.fire('此架構處于禁用狀態!',res.data,'success')//跳出方法，使其不再往下執行return false;}})//如果沒有選擇則提示if(!sel.length) {swal({type: 'error',title: '錯誤提示',text: '請選擇一個架構！'})return false;}//請求后臺進行判斷實現添加還是編輯var url = '/sysEnterpriseOrg/orgAdd.do';var data = {"id":sel,"op":"editAction"};//隱藏的model框顯示并加載數據$('#addDiv').load(url, data, function () {sel = sel[0];var validateData = {"id":sel};var ajaxUrl = "/sysEnterpriseOrg/doListOrgRecursion.do";$.post(ajaxUrl,data).done(function (res) {if(res.status){$('#belong_org_jstree').data('jstree', false).empty();$('#belong_org_jstree').jstree({'core':{'data': res.data,"multiple": false,//單選"themes": {"responsive": false}},"checkbox" : {"keep_selected_style" : false,"three_state":false,"cascade":"undetermined"},"plugins" : [ "checkbox","changed" ]}).on("changed.jstree", function (e, data,node) {var undeterminedsArr =$("#belong_org_jstree").jstree(true).get_undetermined(); //使用get_checked方法var checkedArr = $("#belong_org_jstree").jstree(true).get_checked();choseOrgArr = undeterminedsArr.reverse().concat(checkedArr);choseOrgTextArr = [];choseOrgIdsArr = [];choseOrgArr.forEach(function (value,index,array) {var text = $("#belong_org_jstree").jstree(true).get_node(value).text;var id = $("#belong_org_jstree").jstree(true).get_node(value).id;var textArr = text.split("(");choseOrgTextArr.push(textArr[0]);choseOrgIdsArr.push(id);})$("#belong_org_des").val(choseOrgTextArr.join("/").toString());$("#belong_org_id").val(checkedArr[0]);$("#belong_org_ids").val(choseOrgIdsArr.join(",").toString());console.log(checkedArr[0]);console.log(choseOrgIdsArr.join(",").toString());})$("#belong_org_jstree").fadeOut();$("#belong_org_des").focus(function(){$("#belong_org_jstree").fadeIn();})$("#belong_org_des").blur(function(){$("#belong_org_jstree").fadeOut();})}else{swal({type: 'warning',title: '異常提示:',text: '獲取歸屬機構數據失敗，請重新嘗試！',confirmButtonColor: "#1ab394",})}}).fail(function (err) {swal({type: 'warning',title: '異常提示:',text: '獲取歸屬機構數據異常！',confirmButtonColor: "#1ab394",})});initOrgAddFormValidate("editAction");$("#orgAddModel").modal('show');}); }其中驗證是否是禁用的后臺方法
?
?? @Description("驗證是否是禁用的架構節點")@RequestMapping(value = "/validateIsClosed.do")@ResponseBodypublic Json validateIsClosed(String id){try {ResultDTO resultDTO = this.mSysEnterpriseOrgService.validateIsClosed(id);return Json.getInst().success(resultDTO.getData());} catch (Exception e) {return Json.getInst().fail();}}請求后臺進行判斷實現添加還是編輯
@Description("獲取架構添加或編輯model 新增時要驗證所選節點是否是啟用，啟用的節點才能新增同級或者下級架構")@RequestMapping("/orgAdd.do")public String doGetOrgAddHtml(String op, String id, Model model){// 查詢本id下架構信息SysEnterpriseOrg sysEnterpriseOrg = mSysEnterpriseOrgService.getById(new Long(id));model.addAttribute("orgAddTitle", "editAction".equals(op)?"架構編輯":"sameLevel".equals(op)?"同級架構添加":"下級架構添加");model.addAttribute("orgAddName",? "editAction".equals(op)?"該頁面可對架構數據進行編輯":"sameLevel".equals(op)?"為系統設置一個菜單或者操作架構（同級架構："+sysEnterpriseOrg.getText()+"）":"為系統設置一個菜單或者操作機構（父級架構："+sysEnterpriseOrg.getText()+"）");if(!"editAction".equals(op)){sysEnterpriseOrg.setNum(null);sysEnterpriseOrg.setText(null);sysEnterpriseOrg.setOrgClassify(null);sysEnterpriseOrg.setOpened(null);sysEnterpriseOrg.setSelected(null);sysEnterpriseOrg.setSortNum(null);sysEnterpriseOrg.setIsTopLevel(null);sysEnterpriseOrg.setRemark(null);//sysEnterpriseOrg.setIcon(null);}sysEnterpriseOrg.setPid(sysEnterpriseOrg.getPid()==null?0L:sysEnterpriseOrg.getPid());model.addAttribute("sp",sysEnterpriseOrg);model.addAttribute("op",op);return "enterpriseOrg/org::addDiv";}添加功能的jquery代碼
/*** 添加架構* @returns {boolean}*/ function orgAdd() {var ref = $('#org_tree').jstree(true),sel = ref.get_selected();if(!sel.length) {swal({type: 'error',title: '錯誤提示',text: '請選擇一個架構！'})return false;}sel = sel[0];//驗證是否是禁用的架構var url = '/sysEnterpriseOrg/validateIsOpened.do';var data = {"id":sel};$.post(url,data).done(function (res) {debuggerif(res.status==false){Swal.fire('此架構處于禁用狀態!',res.data,'success')return false;}})swal({title: '創建新的架構？',text: '請您首先選擇需要創建的架構等級！',type: 'warning',showCloseButton: true,showCancelButton: true,confirmButtonColor: "#DD6B55",cancelButtonColor: '#DD4B55',confirmButtonText: '下級創建',cancelButtonText: '同級創建',}).then(function(isConfirm) {//添加下級機構if (isConfirm.value === true) {var url = '/sysEnterpriseOrg/orgAdd.do';var data = {"id":sel,"op":"nextLevel"};$('#addDiv').load(url, data, function () {initOrgAddFormValidate("nextLevel");$("#orgAddModel").modal('show');});}//添加同級架構if (isConfirm.dismiss === "cancel") {var url = '/sysEnterpriseOrg/orgAdd.do';var data = {"id":sel,"op":"sameLevel"};$('#addDiv').load(url, data, function () {initOrgAddFormValidate("sameLevel");$("#orgAddModel").modal('show');});}}); }編輯或者保存后進行保存的方法
?
@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();}}保存方法具體的實現代碼
@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);}}}添加同級架構具體實現
判斷是否為頂級架構，在新增時有個賦值的設置，如果這個字段為1或者這個實體類的pid為0則是頂架構。
?/*** 保存同級架構* @param sysEnterpriseOrg* @param sp* @return*/private ResultDTO doAddSameLevelorg(SysEnterpriseOrg sysEnterpriseOrg, SysEnterpriseOrg sp) {//如果為頂級if(sysEnterpriseOrg.getIsTopLevel()==1||sysEnterpriseOrg.getPid().equals(0L)){sysEnterpriseOrg.setPid(null);} else{sysEnterpriseOrg.setPid(sp.getPid());}int count = baseMapper.insert(sysEnterpriseOrg);if(0==count)return ResultDTO.getInst().fail();return ResultDTO.getInst().success();}}
添加下級架構具體實現
編輯具體實現
?private ResultDTO doEditOrg(SysEnterpriseOrgVO sysEnterpriseOrg, SysEnterpriseOrg sp) {sp.setText(sysEnterpriseOrg.getText());sp.setSortNum(sysEnterpriseOrg.getSortNum());sp.setIcon(sysEnterpriseOrg.getIcon());sp.setPid(sysEnterpriseOrg.getBelongOrgId());sp.setRemark(sysEnterpriseOrg.getRemark());sp.setGmtCreat(sysEnterpriseOrg.getGmtCreat());sp.setIsTopLevel(sysEnterpriseOrg.getIsTopLevel());sp.setDisabled(sysEnterpriseOrg.getDisabled());sp.setOpened(sysEnterpriseOrg.getOpened());sp.setOrgClassify(sysEnterpriseOrg.getOrgClassify());sp.setIsDelete(sysEnterpriseOrg.getIsDelete());boolean flag = this.updateById(sp);return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();}啟用與禁用實現
效果
選中一條點擊禁用
點擊確定
再次點擊禁用
選中禁用的點擊啟用
點擊確定
再次點擊啟用
html頁面代碼
<button class="btn btn-info " type="button" onclick="validateIsOpen()"><i class="fa fa-trash-o"></i>啟用</button> <button class="btn btn-info " type="button" onclick="validateIsClose()"><i class="fa fa-trash-o"></i>禁用</button>Jquery中代碼
啟用功能實現：
啟用時需要將當前架構以及所有子級架構和所有父級架構啟用。
啟用前需要校驗是否已經啟用
//驗證是否啟用 function validateIsOpen() {//獲取選中的數據的idvar ref = $('#org_tree').jstree(true),sel = ref.get_selected();sel = sel[0];//設置請求的url 與請求參數var url = '/sysEnterpriseOrg/validateIsOpened.do';//這句一定要加，不能只寫data = selvar data = {"id":sel};$.post(url,data).done(function (res) {//請求后的回調方法if(res.status==true){//彈窗提示Swal.fire('無須重復啟用!',res.data,'success')//使跳出方法，不再往下執行return false;}else{//執行相關業務方法---啟用操作orgOpen()}})}請求后臺的代碼
@Description("驗證是否是啟用的架構節點")@RequestMapping(value = "/validateIsOpened.do")@ResponseBodypublic Json validateIsOpened(String id){try {Boolean resultDTO = this.mSysEnterpriseOrgService.validateIsOpened(id);//如果為true則返回成功。代表已經啟用if(resultDTO){return Json.getInst().fail();}else{//代表禁用return Json.getInst().success();}} catch (Exception e) {return Json.getInst().fail();}}執行相關啟用業務的代碼
//啟用操作 function orgOpen() {Swal.fire({title: '確定啟用嗎?',type: 'warning',showCancelButton: true,confirmButtonColor: '#23c6c8',cancelButtonColor: '#d33',cancelButtonText:'取消',confirmButtonText: '確定'}).then((result) => {if (result.value) {var ref = $('#org_tree').jstree(true),sel = ref.get_selected();sel = sel[0];debuggerif(!sel.length) {swal({type: 'error',title: '錯誤提示',text: '請選擇一個架構！'})return false;}debuggervar url = '/sysEnterpriseOrg/doOrgOpen.do';var data = {"id":sel};$.post(url,data).done(function (res) {if(res.status){initJsTree();Swal.fire('啟用成功!',res.data,'success')}else{Swal.fire('異常提示','執行啟用操作失敗','error')}}).fail(function (err) {Swal.fire('異常提示','數據啟用失敗','error')});} }); }啟用時后臺執行方法代碼
@Description("啟用")@RequestMapping(value = "/doOrgOpen.do")@ResponseBodypublic Json OrgOpen(String id){try {ResultDTO resultDTO = this.mSysEnterpriseOrgService.doOrgOpen(id);return Json.getInst().success(resultDTO.getData());} catch (Exception e) {return Json.getInst().fail();}}具體實現層代碼
1.啟用時獲取到傳遞過來的id。
2.通過遞歸算法查詢此id對應的所有父級架構，將其設置為啟用。
3.然后通過遞歸算法查詢此id所對應的所有子級架構，將其設置為啟用。
4.然后啟用自己。
啟用具體實現代碼：
?@Overridepublic ResultDTO doOrgOpen(String id) {//啟用父級架構//查詢所有父級架構selectFather(Long.parseLong(id));for (Long s: resultFather) {SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(s);sysEnterpriseOrg.setIsDelete(false);this.updateById(sysEnterpriseOrg);}//啟用子級架構//查詢所有子級架構List<Long> ids =new ArrayList<Long>();ids.add(Long.valueOf(id));selectChild(ids);for (Long s: resultChild) {SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(s);sysEnterpriseOrg.setIsDelete(false);this.updateById(sysEnterpriseOrg);}//啟用自己SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(id);sysEnterpriseOrg.setIsDelete(false);boolean flag = this.updateById(sysEnterpriseOrg);return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();}其中遞歸算法的實現參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92785921
禁用功能實現：
禁用時將當前架構以及其所有子級架構全部禁用。
Jquery部分代碼:
禁用前驗證是否已經禁用：
//驗證是否禁用 function validateIsClose() {var ref = $('#org_tree').jstree(true),sel = ref.get_selected();sel = sel[0];var url = '/sysEnterpriseOrg/validateIsOpened.do';var data = {"id":sel};$.post(url,data).done(function (res) {debuggerif(res.status==false){Swal.fire('此架構處于禁用狀態!',res.data,'success')return false;}else{orgClose()}}) }具體調用禁用方法：
//禁用操作 function orgClose() {var ref1 = $('#org_tree').jstree(true),sel1 = ref1.get_selected();var validateUrl='/sysEnterpriseOrg/validateIsOpened.do';sel1 = sel1[0];var validateData = {"id":sel1};$.ajax(validateUrl,validateData).done(function (res) {if(res==false){swal({type: 'warning',title: '異常提示:',text: '此架構已經禁用',confirmButtonColor: "#1ab394",})return false;}});Swal.fire({title: '確定禁用嗎?',type: 'warning',showCancelButton: true,confirmButtonColor: '#23c6c8',cancelButtonColor: '#d33',cancelButtonText:'取消',confirmButtonText: '確定'}).then((result) => {if (result.value) {var ref = $('#org_tree').jstree(true),sel = ref.get_selected();if(!sel.length) {swal({type: 'error',title: '錯誤提示',text: '請選擇一個架構！'})return false;}debuggersel = sel[0];var url = '/sysEnterpriseOrg/doOrgClose.do';var data = {"id":sel};$.post(url,data).done(function (res) {if(res.status){initJsTree();Swal.fire('禁用成功!',res.data,'success')}else{Swal.fire('異常提示','執行禁用操作失敗','error')}}).fail(function (err) {Swal.fire('異常提示','數據禁用失敗','error')});} }) }后臺方法實現：
@Description("禁用")@RequestMapping(value = "/doOrgClose.do")@ResponseBodypublic Json OrgClose(String id){try {ResultDTO resultDTO = this.mSysEnterpriseOrgService.doOrgClose(id);return Json.getInst().success(resultDTO.getData());} catch (Exception e) {return Json.getInst().fail();}}?
具體禁用業務實現代碼：
/**** 禁用* @param id* @return*/@Overridepublic ResultDTO doOrgClose(String id) {//禁用子級架構//查詢所有子級架構List<Long> ids =new ArrayList<Long>();ids.add(Long.valueOf(id));selectChild(ids);for (Long s: resultChild) {SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(s);sysEnterpriseOrg.setIsDelete(true);this.updateById(sysEnterpriseOrg);}//禁用自己SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(id);sysEnterpriseOrg.setIsDelete(true);boolean flag = this.updateById(sysEnterpriseOrg);return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();}?
總結
以上是生活随笔為你收集整理的SpringBoot+Jquery+Jstree实现企业架构管理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java中使用递归算法实现查找树形结构中
- 下一篇： EasyUI中layout布局的简单使用