场景

效果

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">&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= "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();}}

添加下级架构具体实现

/*** 保存下一级架构* @param sysEnterpriseOrg* @param sp* @return*/private ResultDTO doAddNextLevelOrg(SysEnterpriseOrg sysEnterpriseOrg, SysEnterpriseOrg sp) {// 设置下一级公共参数sysEnterpriseOrg.setPid(sysEnterpriseOrg.getId());sysEnterpriseOrg.setId(null);// 判断是否为空，为空则为第一条int insertCount = baseMapper.insert(sysEnterpriseOrg);if(0==insertCount){return ResultDTO.getInst().fail();}else{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实现企业架构管理相关推荐

优锘科技：企业架构管理平台荣获2021年度创新产品奖
近日,B.P商业伙伴D大会"2021数字生态年度大赏榜单"正式发布出炉.UINO优锘出品的企业架构管理平台QuickEA荣获"2021年度创新产品奖". 202 ...
SpringBoot+Jquery+jsTree实现页面树型结构
场景效果 jstree官网 https://www.jstree.com/ 实现引用CSS样式使用cdn或者将其下载 <link rel="stylesheet" hr ...
java毕业设计基于的企业办公管理系统设计与实现mybatis+源码+调试部署+系统+数据库+lw
java毕业设计基于的企业办公管理系统设计与实现mybatis+源码+调试部署+系统+数据库+lw java毕业设计基于的企业办公管理系统设计与实现mybatis+源码+调试部署+系统+数据库+lw ...
企业架构（三）——联邦企业架构框架（FEAF）
文章目录一.FEAF 1.FEAF的出现 2.FEAF构成 (1)Level 1 (2)Level 2 (3)Level 3--架构模型细化 (4)Level 4--业务架构模型细化(EAP方法) ...
【企业架构】确定策略和动机
战略实践是一个两部分的练习.首先他们是战略的发展--你要做什么才能赢.第二个是战略的执行--实际上需要做这些工作来确保战略计划的实施.有很多关于两者相互作用的文章,许多 CEO 都认为执行比战略更重要 ...
2022中国连锁企业人才管理报告
导读: 本报告对连锁企业运营线的内外部人才供应,新业务.新岗位的人才管理工作,以及人力资源的数字化建设进行了探讨,提出了人才管理工作的策略和行动建议,希望对企业有所启发和借鉴. 关注公众号:[互联互通 ...
「企业架构」企业架构师的TOGAF的权威指南
您需要了解的关于使用企业架构管理工具管理TOGAF®架构开发方法的一切. TOGAF®是什么? TOGAF®和ADM流程的价值是什么? TOGAF®在现代环境中的挑战是什么? TOGAF®的敏捷方法 ...
自学DAMA-DMBOK2之对Zachman企业架构框架的解读分享
最近在学习DAMA数据管理知识体系指南这本书,现在学习到第四章数据架构的内容,在阅读过程中发现书中有些翻译还是比较难以理解的,比如对于Zachman企业架构框架的理解,下面就把我的个人理解与大家进行分 ...
「企业架构」VP:什么是企业架构？
什么是企业架构? 主要企业架构框架企业架构的层次为什么选择企业架构? 什么是EA框架? 企业架构词汇表什么是企业架构? 企业架构(EA)通常与城镇规划或城市设计相比,是一种定义明确的实践,用于进 ...

SpringBoot+Jquery+Jstree实现企业架构管理

场景

效果

实现

数据库设计

对应实体类

点击菜单显示树形结构实现

html页面代码

jquery部分代码

后台Controller方法

新增与编辑实现

效果

html代码

Jquery中代码

添加功能的jquery代码

启用与禁用实现

效果

html页面代码

Jquery中代码

SpringBoot+Jquery+Jstree实现企业架构管理相关推荐

最新文章

热门文章